МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ презентация

Содержание

Литература: Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. - Символ-Плюс, 2006. Дунаев В. Сценарии для Web-сайта. РНР и JavaScript. – СПб: БХВ-Петербург, 2006. Информатика. Базовый курс: учебное пособие для студ.

Слайд 1МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ

Слайд 2Литература:
Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. - Символ-Плюс, 2006.
Дунаев В.

Сценарии для Web-сайта. РНР и JavaScript. – СПб: БХВ-Петербург, 2006.
Информатика. Базовый курс: учебное пособие для студ. вузов : / ред. С. В. Симонович. - СПб: Питер, 2009.


Слайд 3ИР сети Интернет
Что такое web-сайт?
Критерии оценки сайтов
Web-дизайн
Средства разработки Web-сайтов
Основные теги языка

HTML

ЛЕКЦИЯ 2

Тема:
Основные принципы web-дизайна. Язык HTML

Слайд 4

Интернет: глобальная информационная система, части которой логически взаимосвязаны друг с другом

посредством единого адресного пространства, основанного на протоколе TCP/IP.
Интернет состоит из множества взаимосвязанных компьютерных сетей и обеспечивает удаленный доступ к компьютерам, электронной почте, доскам объявлений, базам данных и дискуссионным группам.

Слайд 5ИР сети Интернет
Основные источники ИР представлены в сети Интернет. Подавляющее количество

ресурсов доступно по диалоговому доступу.
Мировые ИР ресурсы в сети Интернет классифицируются по различным признакам.
По способу представления информации (по методу поиска):
WEB-страницы;
GOPHER – гипертекстовый стандарт, практически не развивающимся сегодня, поскольку поддерживает только текстовую форму представления информации;
Базы данных, имеющие интерфейс в Интернете (как правило – платные);
Файловые серверы (FTP);
Телеконференции (NEWS GROUPS).



Слайд 6
По языковому признаку.
По территориальному признаку.

Слайд 7По виду и характеру представляемой информации
тематическая информация
научные публикации
рекламная

информация.
справочная информация
новости
вторичная информация

Слайд 8Сервисы Интернет
Интерактивные
Отложенного чтения
Прямые

Слайд 9Web-сервис (www) – это технология доступа к информационному ресурсу посредством Web-сайта.

Это самый используемый сервис сети.

Web-сайт – это набор связанных друг с другом документов. Для связи таких документов используются гиперссылки.


Слайд 10Информационные ресурсы Интернет
«Визитка»
Промоушн-сайт
Электронный магазин
Информационный сайт
Портал
Корпоративное

представительство
Система управления предприятием

Слайд 11САЙТЫ
информативные
интерактивные

Слайд 12С точки зрения цели можно выделить следующие типы:
Информационные
Прикладные
Непосредственно-коммуникационные
Развлекательные


Коммерческие
Презентационные
Электронный фэн-зин

Слайд 13В коммерческом секторе Интернета:
Корпоративный сайт
Информационный отраслевой портал
Спонсорский проект
Brandland
Сайт коммерческого

взаимодействия

Слайд 14Три основные категории веб-сайтов:

публичные (public),
экстра-сетевые (extranet)
внутрисетевые (intranet)

Слайд 15Выбор критериев оценки сайтов (на примере сайтов коммерческой направленности)

Слайд 16Соответствие сайта целям и задачам
Доступность сайта
Информационное наполнение сайта
Структура информации и

навигация на сайте
Оформление сайта
Функциональность сайта
Интерактивность сайта (диалоговые возможности)



Критерии оценки сайтов

Слайд 17С помощью браузера можно просмотреть любую HTML-страницу, расположенную в Интернете, на

жестком диске компьютера или в локальной сети.
Документы, распространяемые в глобальной сети или сетях компаний, создаются с помощью кода HTML (Hypertext Markup Language — язык гипертекстовой разметки). Этот код определяет, как должен выглядеть текст, где и как нужно разместить графические объекты и куда следует перейти щелчком мыши по некоторой ссылке.

Слайд 18Cуществует множество браузеров.
Примеры популярных браузеров:
Internet Explorer
Netscape Navigator
Opera

Слайд 19Web-браузер (например, Microsoft Internet Explorer или Opera) является клиентским программным обеспечением

для приема и отображения информационных ресурсов, а также для передачи данных на сервер.

Слайд 20
3. Web-сервер осуществляет поиск web-страницы
2. Браузер запрашивает web-страницу
1. Пользователь вводит адрес

web-страницы в поле адреса web-браузера

4. Web-сервер выполняет дополнительную обработку активного кода


5. Web-сервер отправляет web-страницу браузеру

6. Браузер выводит web-страницу на экран

Слайд 21Web-страница может содержать:
текст для передачи описательной информации;
таблицы для представления статистических и

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

Слайд 22В простейшем и наиболее распространенном случае браузер обращается к серверу, передавая

ему URL-адрес (Uniform Resource Locator, унифицированный адрес ресурса) требуемого файла. Обычно это файл с расширением имени htm ими html. Если имя файла URL-адресе не указано, то подразумевается файл index.htm или index.html.

Слайд 23Что такое веб-дизайн, его основные элементы, этапы и принципы
Веб-дизайн – это

процесс производства веб-сайтов, который включает техническую разработку, структурирование информации, визуальный (графический) дизайн и доставку по сети.

Слайд 24Этапы веб-дизайна
1. Техническое задание (ТЗ)
Исходя из четкого понимания цели, для

которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком. Занимается менеджер проекта.

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

Слайд 253. Графическое оформление
В графическом редакторе компонуется визуальное пространство сайта с

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

4. Верстка
На этой стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS трансформируется в код, который можно просматривать с помощью браузера. Выполняется кодером, программистом.

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

Слайд 26Веб-дизайнер самостоятельно осуществляет запуск сайта и выполняет все этапы создания сайта

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

Слайд 27Элементы веб-дизайна
Элементы веб-дизайна – это те абстрактные материалы, с которыми приходится

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

Слайд 28Принципы веб-дизайна
Но чтобы научиться строить здания, недостаточно знать свойства кирпичей. Именно

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

Слайд 29Средства разработки Web сайтов

Слайд 30Средства разработки состоят из среды разработки и языка разработки.
Язык разметки HTML

– это система команд, основная задача которой – представление текстовых и мультимедийных элементов Web страницы в наиболее благоприятной для восприятия форме.

Слайд 31Язык HTML позволяет:
1) Разместить элементы Web страницы в удобной для

восприятия форме:
установить тип текстовых фрагментов, их стиль.
использовать в составе Web станицы элементы сложного форматирования (таблицы, списки и так далее).

Слайд 322) Определять предназначение Web страницы в целом, отдельные ее свойства (кодировка,

сроки использования); параметры взаимоотношения данной Web страницы с другими Web документами (наследование).

Слайд 33Гипертекст – информационная структура, позволяющая устанавливать смысловые связи между элементами текста

на экране компьютера таким образом, чтобы легко можно было переходить от одного элемента к другому.

Слайд 34Элемент – конструкция языка HTML. Его можно представить как контейнер, содержащий

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

Слайд 35Тег (англ. tag – метка, дескриптор, ярлык) – начальный или конечный

маркер элемента.
Теги определяют границы действия элементов и отделяют элементы друг от друга.
В коде web-страницы теги заключаются в угловые скобки < >.

Слайд 36Множество всех тегов HTML можно разделить на следующие группы:
структура документа;
ссылки;
вставка содержимого

из внешних источников;
разметка страницы;
форматирование текста;
формы и элементы пользовательского интерфейса.

Слайд 37Теги бывают двух видов: одиночные и парные.

Одиночный тег определяет реакцию браузера

в том месте, где он находится на Web-странице.
Пример.


Слайд 38Парный тег (контейнер) – определяет действие в отношении фрагмента Web-страницы, который

находится между открывающей и закрывающей частью парного тега. Конечный тег всегда снабжается косой четой /.

Пример
Некий текст

Слайд 39Атрибут (параметр) тега – определяет дополнительное свойство тега, уточняет его действие.


В случае парного тега используется внутри открывающего тега.

Слайд 40Например:

Тег абзаца (параграфа).

----------------------
----------------------

Текст будет отображаться выровненным по центру.


Здесь align является параметром, а center – значением данного параметра.

Слайд 41У тега может быть один атрибут, несколько атрибутов или может вообще

их не быть.
Пример с несколькими атрибутами.

Некий текст

Два атрибута: color - атрибут цвета и size - атрибут размера.

Слайд 42Сценарий (SСRIPT, скрипт)
- это программный код, обеспечивающий работу интерактивных и

динамических элементов Web-сайта.

Слайд 43Сценарии бывают двух видов:
1)Серверный – это программа, выполняющаяся на Web-сервере.
2)Клиентский –

это программа, выполняющаяся с помощью интерпретатора браузера (то есть на компьютере пользователя).

Слайд 44Клиентский сценарий в отличие от языка разметки HTML предоставляет гораздо больше

возможностей:
для взаимодействия с операционной системой и браузером;
по управлению элементами интерфейса операционной системы и браузером.

Слайд 45Серверный сценарий чаще всего используется для отображения в виде Web страниц

содержимого баз данных, которые хранятся на сервере.

Слайд 46Преимущества серверного сценария:
Более широкий спектр возможностей по обработке взаимодействия пользователя и

Web-сайта.
Преимущества клиентского сценария:
Большая скорость обработки и экономия ресурсов (за счет уменьшения передачи данных между сервером и компьютером пользователя).

Слайд 47Среда разработки – это программное обеспечение, позволяющее эффективно создавать элементы Web-

страниц, разрабатывать сценарии и осуществлять их отладку.
Например:
MS Front Page.
Macromedia DreamWeaver.
Блокнот.

Слайд 48Основные теги HTML
Начало и конец документа.
Формируются при помощи парного тега .




Заголовок
Тело

Слайд 49Структура документа HTML













Слайд 50Заголовок HTML документа – определяет назначение HTML документа и его основные

свойства.
Формируется при помощи парного тега :

…

Содержимое заголовка обычно не отражается на экране пользователя при просмотре Web-документа.

Слайд 51Заголовок HTML документа
Допускает вложение элементов
TITLE, ISINDEX, BASE, META, LINK, NEXTID

… - строка текста, расположенная внутри, отображается в заголовке окна браузера.

Слайд 52Текст тега TITLE
в заголовке
окна браузера
ПРИМЕР:
Учебник "Проектирование web-документов"

Слайд 53Тег используется для описания свойств HTML документа.
Он является одиночным,

содержит следующие атрибуты:
http-equiv
name
content
Первые два используются для обозначения свойств (т.е. дают свойству имя), последний используется для придания свойству значения.

Слайд 54
Первые два используются для обозначения свойств (то есть дают свойству имя),

последний используется для придания свойству значения.

Слайд 55
Например:

Используется для обозначения годности документа.

Слайд 56


Указывает на тип документа, его отношение к текстовому документу

и его кодировка.

Слайд 57


Дает описание содержимого Web страницы.

Слайд 58

Определяет ключевые слова данного Web документа.

Слайд 59
Свойства HTML документа, обозначенные http-equiv передаются на компьютер пользователя в составе

HTTP заголовка. Браузер обязательно интерпретирует http заголовок. Инструкции, содержащиеся в http заголовке особенно важны для правильного отображения HTML документа.

Слайд 60
Свойства HTML документа, определенные с помощью атрибута name носят рекомендательный характер

и в большинстве своем игнорируются браузером

Слайд 61
Подобные МЕТА свойства (или свойства HTML документа) обрабатываются поисковыми системами.

Слайд 62Тело Web-документа – определяет содержательную часть Web- документа (информация, графика и

так далее).
Формируется при помощи парного тега :


------------

Слайд 63Структура тега BODY
1. Атрибут bgcolor – для отображения фона HTML документа.
Пример.
bgcolor=”white”

(black, blue и другие цвета)

Слайд 64
Данному атрибуту может присваиваться свойство RGB (RGB – red, green, blue).

Слайд 65Пример.
bgcolor=”#FFCC22”, где
FF – уровень красной составляющей, CC - уровень зеленой

составляющей, 22 – уровень синей составляющей.
В шестнадцатеричной системе исчисления FFFFFF – белый цвет, 000000 – черный цвет.
Данная кодировка (RGB) может использоваться во всем HTML документе.

Слайд 672. Атрибут background – определяет фон с помощью графического формата.
Пример.
background=”2.jpg”
В значении

атрибута указывается название документа и путь к нему. (Если указано только название, то данный файл должен находиться в той же папке, что и HTML документ).

Слайд 68Файл 2.jpg

Файл 2.jpg

Слайд 69
Если путь указан так:
background=”/fold1/2.jpg”, то папка будет искаться начиная от текущего

каталога.

Слайд 703. Атрибут TEXT – определяет цвет основного текста.
Значения данного атрибута могут

быть такими же, как у атрибута bgcolor.

Слайд 71Эти же правила верны и для следующих атрибутов:
4. Атрибут LINK

определяет цвет ссылки.
5. Атрибут VLINK определяет цвет уже посещенной ранее ссылки.
6. Атрибут ALINK определяет цвет активной ссылки (то есть ссылки, указывающей на текущий документ).

Слайд 72
7. Атрибут TOPMARGIN=(верхнее поле).
8. Атрибут LEFTMARGIN=(левое поле).

Слайд 73
Пример.
TOPMARGIN=”20” (в пунктах).
LEFTMARGIN=”10” (в пунктах).
Все содержимое HTML документа будет смещено относительно

левого и верхнего края HTML документа.

Слайд 74Форматирование текста
В HTML документе можно помещать комментарии (они игнорируются браузером и

используются для служебных целей).
Комментарии.
1) Одиночный тэг.

Слайд 75
2) Парный тэг .

------------------



Слайд 76Браузеры игнорируют “обычные” средства форматирования текста, такие как последовательность пробелов, знаки

табуляции, переводы строки и прочие. Чтобы отформатировать документ, используются средства физического и логического форматирования.
К физическим относятся тэги, которые определяют напрямую внешний вид текста.
К логическим относятся тэги, которые определяют логический статус (значение) текста.

Слайд 77Физические средства форматирования
1.Одиночный тег
- перевод строки (разрыв строки).

Слайд 78
2.Парный тег … - запрещает разрыв текста, находящегося в контейнере. Данный

тег еще называют тег жесткого переноса.
По причине различных условий, в которых отражается HTML документ (разные браузеры, видеорежимы, разрешение экрана) HTML документ может отображаться с нарушением взаимного расположения элементов.

Слайд 79
3. Одиночный тэг - определяет место мягкого переноса. Данный тэг

используется совместно с тэгом и размещается внутри его контейнера.
Браузер осуществляет перенос в соответствии с этим тэгом только в том случае, если строчка не помещается в ширину окна и обычный перенос запрещен с помощью тэга .

Слайд 80
4. Парный тэг… - параграф или абзац. Текст, находящийся внутри тэга

оформляется в виде параграфа или абзаца.
Атрибут ALIGN= выравнивание текста.
Возможные значения:
=LEFT – по левому краю.
=CENTER – по центру.
=RIGHT – по правому краю.

Слайд 81
5. Парные тэгы заголовка.
Бывают шести уровней:
…
… …

…
…

Слайд 82
Текст заголовка выравнивается, до и после текста интервал.
Допустимо использование атрибута ALIGN.
Данные

тэги имеют большое значение для повышения информационной ценности документа в ”глазах” поисковой системы.

Слайд 83
6. Тэг – одиночный горизонтальный тэг.
Там где находится данный тэг,

отображается горизонтальная черта.
Атрибуты:
ALIGN
COLOR –цвет черты (значения как у background).
WIDTH – ширина линии (в пунктах).
SIZE – толщина линии (в пунктах).
NOSHADE – без тени.

Слайд 847. Парный тэг ….
Предназначен для определения шрифта (начертания) отображаемого

текста (курсив и так далее).
Атрибуты:
FACE – название шрифта.
Пример:
FASE=”Times New Roman”

Слайд 85
Текст, который помещен внутри контейнера будет отображен данным шрифтом. В связи

с тем, что сложно угадать есть ли у пользователя такой же шрифт, допускается перечисление нескольких шрифтов через запятую в тэге.
COLOR
SIZE=3 - по умолчанию. (Размер символов может быть от 1 до 7).

Слайд 86
8.Одиночный тэг
Данный тег устанавливает базовое значение текстовых значений Web страниц,

находящихся после . Атрибуты как у тега .

Слайд 879. Парный тег … -
преформатирование.
Используется для форматирования текста

стандартными способами (табуляцией, последовательностью пробелов и так далее).
Пример:

   _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|_ _ _ _ _ _ _|_ _ _ _ _ _ _|
  |_ _ _ _ _ _ _|_ _ _ _ _ _ _|

Слайд 88
10. Парный тэг …
Используется для выравнивания группы элементов таблицы

(группа – несколько текстовых или графических элементов). Все, что внутри таблицы выравнивается.
Пример:

Align

Слайд 89
10. Парный тэг …
Все содержимое контейнера данного тэга выравнивается

по центру.

Слайд 90
… - выделяет текст в контейнере с помощью жирного шрифта.
… -

выделяет текст в контейнере с помощью наклонного текста (курсив).
3) Парный тэг … - подчеркивание.

Слайд 91Примеры логического форматирования
1) Парный тэг …
Используется для цитат.

Обычно браузером отображается в виде курсива (наклонного текста).

Слайд 92
2) Парный тэг …
Используется для выделения больших цитат. (Браузер обычно делает

отступ от левого края).

Слайд 93
В большинстве случаев браузер не допускает пересечение тегов.
Пример пересечения:



FONT >
(В лучшем случае просто не запустится).
Но есть и исключения, например ………
В том месте, где пересеклись тэгы и , текст будет выделен жирным курсивом.

Слайд 94Специальные символы
Используются для отображения символов, которые являются в HTML управляющими и

не могут быть отображены обычными способами.
Например, (>) - больше или (<) – меньше. Браузер ее воспринимает как начало контрольной последовательности.

Слайд 95Для того чтобы все-таки отобразить эту скобку необходимо набрать последовательность:
<

- отобразится левая скобка.
> - отобразится правая скобка.
© - отобразится значок авторского права.
° - отобразится значок температуры.
  отобразится символ пробела (жесткого пробела). Если пробел указан с помощью данного специального символа, то разрыв строки не допускается, так как браузер будет видеть слова и пробелы как одно слово.

Похожие презентации

Цветовая гамма 677
Product Management, User Experience & More: Lessons From 2015 244
Творческий отчет 326
План исследовательской работы 248
Поиск изменений в красочном хаосе Золотой рог 236
Фрагменты видеолекцийпо начертательной геометрии 331

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

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

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

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

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

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

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