'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35

Множество всех тегов HTML можно разделить на следующие группы: структура документа; ссылки; вставка содержимого из внешних источников; разметка страницы; форматирование текста; формы и элементы пользовательского интерфейса.


Слайд 36

Теги бывают двух видов: одиночные и парные. Одиночный тег определяет реакцию браузера в том месте, где он находится на Web-странице. Пример. <BR>


Слайд 37

Парный тег (контейнер) – определяет действие в отношении фрагмента Web-страницы, который находится между открывающей и закрывающей частью парного тега. Конечный тег всегда снабжается косой четой /. Пример <I> Некий текст </I>


Слайд 38

Атрибут (параметр) тега – определяет дополнительное свойство тега, уточняет его действие. В случае парного тега используется внутри открывающего тега.


Слайд 39

Например: Тег абзаца (параграфа). <P align=”center”> ---------------------- ---------------------- <P> Текст будет отображаться выровненным по центру. Здесь align является параметром, а center – значением данного параметра.


Слайд 40

У тега может быть один атрибут, несколько атрибутов или может вообще их не быть. Пример с несколькими атрибутами. <Font color="red" size="3"> Некий текст </Font> Два атрибута: color - атрибут цвета и size - атрибут размера.


Слайд 41

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


Слайд 42

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


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

Среда разработки – это программное обеспечение, позволяющее эффективно создавать элементы Web- страниц, разрабатывать сценарии и осуществлять их отладку. Например: MS Front Page. Macromedia DreamWeaver. Блокнот.


Слайд 47

Основные теги HTML Начало и конец документа. Формируются при помощи парного тега <HTML>. <HTML> Заголовок Тело </HTML>


Слайд 48

Структура документа HTML <HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY>


Слайд 49

Заголовок HTML документа – определяет назначение HTML документа и его основные свойства. Формируется при помощи парного тега <HEAD>: <HEAD> … </HEAD> Содержимое заголовка обычно не отражается на экране пользователя при просмотре Web-документа.


Слайд 50

Заголовок HTML документа Допускает вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID <TITLE> … </TITLE> - строка текста, расположенная внутри, отображается в заголовке окна браузера.


Слайд 51

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


Слайд 52

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


Слайд 53

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


Слайд 54

Например: <META http-equiv=”expires” content=”Friday, 21-Feb-03 00:00:00GMT”> Используется для обозначения годности документа.


Слайд 55

<META http-equiv=”Content-Type” content=”txt/html;charset=Windows1251”> Указывает на тип документа, его отношение к текстовому документу и его кодировка.


Слайд 56

<META name=”DECRIPTION” content=”описание”> Дает описание содержимого Web страницы.


Слайд 57

<META name=”KEYWORDS” content=”…, …, …” Ключевые слова указываются через запятую (можно пробел). Определяет ключевые слова данного Web документа.


Слайд 58

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


Слайд 59

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


Слайд 60

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


Слайд 61

Тело Web-документа – определяет содержательную часть Web- документа (информация, графика и так далее). Формируется при помощи парного тега <BODY>: <BODY> ------------ </BODY>


Слайд 62

Структура тега BODY 1. Атрибут bgcolor – для отображения фона HTML документа. Пример. bgcolor=”white” (black, blue и другие цвета)


Слайд 63

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


Слайд 64

Пример. bgcolor=”#FFCC22”, где FF – уровень красной составляющей, CC - уровень зеленой составляющей, 22 – уровень синей составляющей. В шестнадцатеричной системе исчисления FFFFFF – белый цвет, 000000 – черный цвет. Данная кодировка (RGB) может использоваться во всем HTML документе.


Слайд 65


Слайд 66

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


Слайд 67

Файл 2.jpg


Слайд 68

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


Слайд 69

3. Атрибут TEXT – определяет цвет основного текста. Значения данного атрибута могут быть такими же, как у атрибута bgcolor.


Слайд 70

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


Слайд 71

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


Слайд 72

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


Слайд 73

Форматирование текста В HTML документе можно помещать комментарии (они игнорируются браузером и используются для служебных целей). Комментарии. 1) Одиночный тэг. <!-- Все, что находится между первой и последней треугольной скобкой считается комментарием. -->


Слайд 74

2) Парный тэг <COMMENT> . <COMMENT> ------------------ </COMMENT>


Слайд 75

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


Слайд 76

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


Слайд 77

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


Слайд 78

3. Одиночный тэг <wbr> - определяет место мягкого переноса. Данный тэг используется совместно с тэгом <nobr> и размещается внутри его контейнера. Браузер осуществляет перенос в соответствии с этим тэгом только в том случае, если строчка не помещается в ширину окна и обычный перенос запрещен с помощью тэга <nobr>.


Слайд 79

4. Парный тэг<p>…</p> - параграф или абзац. Текст, находящийся внутри тэга оформляется в виде параграфа или абзаца. Атрибут ALIGN= выравнивание текста. Возможные значения: =LEFT – по левому краю. =CENTER – по центру. =RIGHT – по правому краю.


Слайд 80

5. Парные тэгы заголовка. Бывают шести уровней: <H1>…</H1> … … … <H6>…</H6>


Слайд 81

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


Слайд 82

6. Тэг <HR> – одиночный горизонтальный тэг. Там где находится данный тэг, отображается горизонтальная черта. Атрибуты: ALIGN COLOR –цвет черты (значения как у background). WIDTH – ширина линии (в пунктах). SIZE – толщина линии (в пунктах). NOSHADE – без тени.


Слайд 83

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


Слайд 84

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


Слайд 85

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


Слайд 86

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


Слайд 87

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


Слайд 88

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


Слайд 89

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


Слайд 90

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


Слайд 91

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


Слайд 92

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


Слайд 93

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


Слайд 94

Для того чтобы все-таки отобразить эту скобку необходимо набрать последовательность: &lt - отобразится левая скобка. &gt - отобразится правая скобка. &copy - отобразится значок авторского права. &deg - отобразится значок температуры. &nbsp; отобразится символ пробела (жесткого пробела). Если пробел указан с помощью данного специального символа, то разрыв строки не допускается, так как браузер будет видеть слова и пробелы как одно слово.


Слайд 95


Слайд 96


×

HTML:





Ссылка: