Автор работы: Пользователь скрыл имя, 28 Января 2013 в 17:03, лекция
В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.
Элемент DIV является базовым контейнером блочного уровня. Он используется для объединения различных частей контента в логически цельную единицу или логический блок. Этот элемент, эффективно взаимодействуя с таблицами стилей, позволяет форматировать разделы отдельной страницы или даже целого сайта. Текстовый блок, отделенный логически, легко потом выделить при отображении любым способом, например, шрифтом, цветом, межстрочным интервалом, центрированием и т.п. Содержимое элемента DIV может быть расположено произвольным образом, выделено другим фоном и т.д. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.
Аналогом DIV на уровне текста является элемент SPAN. Элемент SPAN является базовым контейнером строкового уровня. Он также помогает представить структуру документа, но используется для объединения в группу или создания оболочки вокруг других строковых элементов или текста.
Различие между двумя этими элементами состоит в типе контента, а также в его представлении при записи без какого-либо стилевого оформления. Элемент DIV помещается вокруг группы элементов блочного уровня (например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню). Элемент SPAN создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста.
Следующий фрагмент кода демонстрирует применение элементов DIV и SPAN:
<BODY>
<DIV id="Content">
<H1>Заголовок страницы </H1>
<P>Это первый параграф.</P>
<IMG src="image.gif" alt="Это какое-то изображение">
<P>Это второй параграф, который содержит <SPAN id="Special"> элемент SPAN</SPAN>.</P>
</DIV>
</BODY>
Теперь можно выделить содержимое элементов DIV и SPAN с помощью их атрибутов id и применить к ним специальное стилевое оформление и позиционирование с помощью свойств CSS.
Лекция 8. Ссылки в HTML. Таблицы
Хотя HTML содержит большое количество средств для форматирования текста и структурирования документов, его основной особенностью является возможность создания гипертекстовых документов. Гипертекстовыми являются документы, которые содержат гиперссылки на другие ресурсы сети Интернет. Особенность гиперссылки заключается в том, что она может указывать не только на другой HTML-документ или любой другой ресурс (текстовые файлы, файлы PDF, изображения, звуковые файлы и т.д.), но и на определенный раздел текущего HTML-документа.
Текст гиперссылки, как правило, помечается подчеркиванием и цветом, чтобы его было легко визуально отличить от обычного текста. При наведении курсора мыши на ссылку, курсор превращается в "руку", а в статусной строке браузера отображается путь к ресурсу, на который указывает ссылка.
Любая ссылка на Web-странице может находиться в одном из следующих пяти состояний:
Следует помнить, что различные
состояния ссылок в различных
браузерах реализуются и
Любой строковый элемент или изображение можно превратить в гиперссылку. Для этого необходимо сообщить браузеру, какой элемент является ссылкой, а также указать адрес ресурса, на который следует сделать ссылку. Оба эти действия выполняются с помощью элемента A.
Элемент A имеет несколько атрибутов, главным из которых являются href, задающий адрес ресурса, на который указывает ссылка. Адрес ссылки может быть абсолютным и относительным. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сервера применяются относительные адреса. Ниже представлены некоторые примеры создания ссылок:
<A href="../images/image.jpg">
<A href="http://www.microsoft.ru"
<A href="mailto:myname@gmail.com" title="Пишите письма">
myname@gmail.com</A>
Иногда оказывается полезным организовать ссылки не на другие HTML-документы, а на определенные места того же самого документа. Подобные ссылки еще называют закладками. Вначале следует задать в соответствующем месте HTML-документа закладку и установить ее имя с помощью атрибута name элемента A. Имя ссылки на закладку начинается с символа #, после чего идет название закладки. Можно также делать ссылку на закладку, находящуюся на другой Web-странице и даже другом сайте. Для этого в адресе ссылки надо указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <A name=..> и </A> текст писать необязательно, т.к. требуется лишь указать местоположение перехода по ссылке.
Приведенный фрагмент кода создает закладку и ссылку на нее:
<A name="top"></A>
...
<A href="#top">Вверх!</A>
Ссылкой может быть не только строковый элемент, но и изображение. Изображение в этом случае надо поместить между тегами <A href=...> и </A>, как показано в примере:
<A href="sample.html"><img src="sample.gif" width="50" height="50" alt="Изображение-ссылка"></A>
Атрибут href элемента A задает путь к документу, на который указывает ссылка, а атрибут src элемента IMG - путь к графическому файлу, который используется в качестве ссылки.
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Можно воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется свойство border cо значением none. На рисунке 8.1 представлены текстовая и графическая ссылки.
Рис. 8.1. Вид текстовой и графической ссылок в браузере
Как и большинство элементов HTML, элемент A может иметь атрибут title, который представляет некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа.
Отличительной особенностью Web-сайтов является нелинейность их содержимого. А для перемещения и ориентации в этом нелинейном пространстве служит навигационная система сайта. Основными инструментами для создания навигационной системы в HTML являются ссылки, закладки и списки. Чтобы показать пользователю, что закладки и ссылки выполняют функцию навигационного меню, а не являются случайным набором ссылок, их необходимо структурировать и стилистически оформить. Если порядок страниц не имеет значения, можно использовать неупорядоченный список, как показано в примере ниже:
<ul id="mainmenu">
<li><a href="home.html">Домашняя страница</a></li>
<li><a href="projects.html">Наши проекты</a></li>
<li><a href="services.html">Наши услуги </a></li>
<li><a href="contact.html">Контакты</
</ul>
Если порядок, в котором посетители просматривают все документы, важен, то необходимо использовать упорядоченный список. Если, например, имеется онлайновый курс, состоящий из нескольких лекций, и учащиеся должны изучать его в определенном порядке, то можно было бы использовать упорядоченный список. Использование списков для создания меню очень удобно, т.к. весь код HTML содержится в одном элементе списка, что позволяет использовать CSS для различного оформления каждого элемента. Кроме того, списки могут быть вложенными, что позволяет легко создавать несколько уровней иерархии навигации. Даже без какого-либо стилевого оформления списка, представление в браузере кода HTML имеет смысл, и посетителю легче понять, что эти ссылки объединены и составляют одну логическую единицу.
Существует несколько типов
меню. Большинство из них можно
создавать с помощью списков.
Меню, созданные на основе списков,
чаще всего применяются для
Примером организации
Навигация по сайту является наиболее распространенным типом меню, в том или ином виде присутствующим практически на каждом сайте. Это меню для всего сайта, со ссылками, указывающими на различные страницы на этом сайте. Данное меню представляет пользователю как доступные варианты перехода, так и иерархию сайта. Важным вопросом при организации навигации по сайту является вопрос выделения текущего документа в меню, чтобы создать у пользователя ощущение присутствия в определенном месте.
Одно из золотых правил разработки и навигации в Интернете состоит в том, что текущий документ никогда не должен ссылаться на себя самого, однако должен явно отличаться от других записей в меню. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту.
Если пользователю предлагается ссылка, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. По этой причине ссылка на текущую страницу никогда не должна присутствовать в меню ссылок. Данную ссылку лучше удалить или деактивировать.
Контекстная навигация представляет собой список ссылок, которые указывают на HTML-документы, связанные с темой просматриваемой страницы. Контекстные меню являются ссылками, которые создаются на основе содержимого текущего документа, и предлагают дополнительную информацию, связанную с текущей страницей. Классическим примером являются ссылки на связанные статьи, которые можно видеть в начале новостных лент.
Схема сайта является схемой всех страниц сайта или основных разделов крупных сайтов. Она позволяет посетителям сайта получить представление обо всей структуре сайта и быстро перейти в требуемое место, даже если оно находится где-то в иерархии страниц. Как схема сайта, наряду с поиском по сайту, дает возможность пользователю быстро и эффективно перемещаться по сайту.
Нумерация страниц необходима для организации быстрого перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска, такими, как поисковые системы Яндекс, Google и т.п. Нумерация страниц отличается от других типов навигации тем, что она обычно соединяется с тем же документом, но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Меню нумерации страниц позволяют посетителям просматривать множество данных без потери представления о том, где они находятся.
Для организации большинства
Одним из таких методов являются клиентские карты-изображения. Карты-изображения превращают изображение в меню, задавая в нем интерактивные области, которые можно соединить с различными документами. Например, следующий ниже код превращает изображение легендарной ливерпульской четверки в меню, на котором можно щелкать мышью.
Рис. 8.2. Изображения участников группы "Beatles" являются ссылками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
<HTML>
<HEAD>
<TITLE>Карта-изображение</
</HEAD>
<BODY>
<img src="map.gif" width="400" height="100" usemap="#map">
<MAP name="map">
<AREA shape="poly" title="Пол" coords="57,47, 40,29, 53,10, 74,5, 95,9, 106,34, 95,55" href="paul.html">
<AREA shape="poly" title="Ринго" coords="144,87, 120,68, 122,45, 155,38, 176,49, 176,76, 161,86" href="ringo.html">
<AREA shape="poly" title="Джордж" coords="212,62, 192,56, 176,41, 177,26, 206,15, 226,25, 227,48" href="george.html">
<AREA shape="poly" title="Джон" coords="332,71, 300,63, 280,40, 298,17, 334,25, 347,60" href="john.html">
</MAP>
</BODY>
</HTML>
Любое изображение можно превратить в меню, определяя карту с различными областями, называемыми также горячими точками. Для указания браузеру на то, что изображение является картой, используется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается элементом MAP. Значение атрибута name данного элемента должно соответствовать имени в usemap. Для задания активной области, являющейся ссылкой на документ HTML, используется элемент AREA.
Каждая область должна иметь несколько атрибутов.
Атрибут href определяет URL-адрес ресурса, с которым должна соединяться ссылка.
Атрибут shape определяет форму активной области. Область может быть задана в виде окружности (значение circle), прямоугольника (значение rect) или многоугольника (значение poly).
Атрибут coords определяет координаты в изображении, которые должны стать горячими точками. Значения координат отсчитываются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей необходимо определить только верхний левый и нижний правый углы; для окружностей необходимо определить центр окружности и радиус; для многоугольников необходимо предоставить наиболее полный список всех угловых точек.
Использование карт-изображений наглядней, чем обычные текстовые ссылки, и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.