МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ. Литература: 1.Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. - Символ- Плюс, 2006. 2.Дунаев В. Сценарии для Web- сайта. - презентация

1 МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ

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

3 1. ИР сети Интернет 2. Что такое web-сайт? 3. Критерии оценки сайтов 4.Web-дизайн 5. Средства разработки Web-сайтов 6. Основные теги языка HTML Тема: Основные принципы web-дизайна. Язык HTML

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

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

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

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

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

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

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

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

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

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

14 Три основные категории веб-сайтов: публичные (public), экстра-сетевые (extranet) внутрисетевые (intranet)

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

16 1. Соответствие сайта целям и задачам 2. Доступность сайта 3. Информационное наполнение сайта 4. Структура информации и навигация на сайте 5. Оформление сайта 6. Функциональность сайта 7. Интерактивность сайта (диалоговые возможности) Критерии оценки сайтов

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

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

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

20 3. Web-сервер осуществляет поиск web-страницы 2. Браузер запрашивает web-страницу 1. Пользователь вводит адрес web-страницы в поле адреса web- браузера 4. Web-сервер выполняет дополнительную обработку активного кода 5. Web-сервер отправляет web-страницу браузеру 6. Браузер выводит web-страницу на экран

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

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

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

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

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

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

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

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

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

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

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

32 2) Определять предназначение 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

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 – белый цвет, – черный цвет. Данная кодировка (RGB) может использоваться во всем HTML документе.

66

67 2. Атрибут background – определяет фон с помощью графического формата. Пример. background=2. jpg В значении атрибута указывается название документа и путь к нему. (Если указано только название, то данный файл должен находиться в той же папке, что и HTML документ).

68 Файл 2.jpg

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

70 3. Атрибут 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 – без тени.

84 7. Парный тэг …. Предназначен для определения шрифта (начертания) отображаемого текста (курсив и так далее). Атрибуты: FACE – название шрифта. Пример: FASE=Times New Roman

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

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

87 9. Парный тег … - преформатирование. Используется для форматирования текста стандартными способами (табуляцией, последовательностью пробелов и так далее). Пример: _ _ _ _ _ _ _ _ _ _ _ _ _ _ |_ _ _ _ _ _ _|_ _ _ _ _ _ _| |_ _ _ _ _ _ _|_ _ _ _ _ _ _|

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

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

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

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

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

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

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

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

96

97