Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Вот и все об изображениях-картах и о графических гиперссылках вообще.
Полоса навигации
Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.
Полоса навигации может быть расположена по горизонтали, вверху или внизу Web- страницы, или по вертикали, слева или справа. Горизонтальную полосу навигации можно сформировать с помощью обычного абзаца или таблицы с одной строкой и нужным числом ячеек (каждая гиперссылка располагается в своей ячейке таблицы). Вертикальную полосу навигации обычно формируют с помощью таблицы из одного столбца и нужного числа ячеек (опять же, каждая гиперссылка располагается в своей ячейке таблицы), набора абзацев (каждая гиперссылка представляет собой отдельный абзац) или в виде списка (гиперссылки представляют собой пункты этого списка).
Гиперссылки полосы навигации могут быть текстовыми или графическими. В последнем случае практически всегда применяют изображения-гиперссылки. Зачастую для изображений-гиперссылок реализуют особое поведение, заменяющее изображение другим при наведении на соответствующую гиперссылку курсора мыши. (О поведении Web-страницы мы поговорим в части III.)
Полосу гиперссылок всегда выделяют, чтобы привлечь к ней внимание посетителя. Ее могут выделить цветом текста и фона, рамкой, увеличенным размером шрифта или всем вместе. Все это реализуется с помощью задания соответствующего представления Web-страницы.
Давайте создадим на главной Web-странице нашего Web-сайта полосу навигации с гиперссылками, указывающими на другие его Web-страницы: посвященную CSS, содержащую список примеров и сведения о разработчиках. Для простоты реализуем ее в виде абзаца, содержащего нужные гиперссылки. Поместим ее в самом верху Web-страницы, перед заголовком (листинг 6.3).
Листинг 6.3
.
<BODY>
<P><A HREF="css_index.htm">CSS</A> |
<A HREF="samples_index.htm">Примеры</A> |
<A HREF="about.htm">О разработчиках</A></P>
<H1>Справочник по HTML и CSS</H1>
.
Как видим, наша первая полоса навигации очень проста — обычный абзац с набором гиперссылок, разделенных символом | (вертикальная черта). Ну так ведь и наш первый Web-сайт не слишком сложен…
При желании мы можем создать остальные Web-страницы нашего первого Web- сайта. Но не будем сильно в этом усердствовать — все равно мы его потом переделаем.
Якоря
Напоследок рассмотрим еще одну возможность, предлагаемую нам языком HTML и способную сильно упростить посетителям чтение длинных текстов. Хотя она и не относится к гиперссылкам напрямую, но действует совместно с ними.
Это так называемые якоря (anchors). Они не указывают на другую Web-страницу (файл, адрес электронной почты), а помечают некоторый фрагмент текущей Web- страницы, чтобы другая гиперссылка могла на него сослаться. Так можно пометить отдельные главы длинного текстового документа и посетитель сможет "перескочить" к нужной ему главе, щелкнув гиперссылку в оглавлении. Очень удобно!
Якоря создают с помощью тега <A>, как и гиперссылки. Только в данном случае атрибут HREF в нем присутствовать не должен. Вместо него в тег <A> помещают обязательный здесь атрибут ID, задающий уникальное в пределах текущей Web- страницы имя создаваемого якоря. К нему предъявляются те же требования, что и к имени карты (см. раздел, посвященный картам).
И еще. Мы уже знаем, что тег <A> парный и в случае гиперссылки в него помещают текст (или изображение), который этой самой гиперссылкой и станет. Когда создают якорь, в этот тег не помещают ничего (так называемый пустой тег). По крайней мере, так поступают чаще всего.
Листинг 6.4 иллюстрирует пример HTML-кода, создающего якорь.
Листинг 6.4
.
<P>Окончание второй главы…</P>
<A ID="chapter3"></A>
<P>Начало третьей главы…<P>
.
Здесь мы поместили якорь с именем chapter3 перед началом третьей главы нашего воображаемого документа.
Хорошо! Якорь готов. Как теперь на него сослаться с другой Web-страницы? Очень просто. Для этого достаточно создать обычную гиперссылку, добавив в ее интернет-адрес имя нужного нам якоря. Имя якоря ставят в самый конец интернет-адреса и отделяют от него символом # ("решетка").
Предположим, что Web-страница, содержащая якорь chapter3, хранится в файле novel.htm. Тогда, чтобы сослаться на этот якорь с другой Web-страницы, мы создадим на последней такую гиперссылку:
<A HREF="novel.htm#chapter3">Глава 3</A>
При щелчке на такой гиперссылке Web-обозреватель откроет Web-страницу novel.htm и прокрутит ее в окне так, чтобы достичь места, где находится якорь chapter3.
Если же нам нужно сослаться на якорь с той же Web-страницы, где он находится, то можно использовать в качестве интернет-адреса только имя данного якоря, предварив его символом "решетки":
<A HREF="#chapter3">Глава 3</A>
На этом закончим главу о средствах навигации.
Что дальше?
В этой главе мы рассмотрели средства навигации, предлагаемые языком HTML, а именно — всевозможные гиперссылки. И связали все созданные нами к данному моменту Web-страницы в единый Web-сайт.
Пожалуй, можно завершить разговор о содержимом Web-страниц и языке HTML, на котором оно создается. Настала пора рассмотреть представление Web-страниц, о котором мы неоднократно упоминали. Именно этому будет посвящена вся следующая часть данной книги.
ЧАСТЬ 2
Представление Web-страниц. Каскадные таблицы стилей CSS 3
ГЛАВА 7. Введение в стили CSS
Предыдущая часть книги была посвящена содержимому Web-страниц и языку HTML 5, на котором оно создается. Мы изучили немало новых терминов, использовали много тегов HTML и создали несколько Web-страниц нашего первого Web- сайта. Эти Web-страницы содержат большой объем текста, таблицу, графическое изображение, аудио- и видеоролик. Неплохо для начала. Только вот выглядят эти Web-страницы как-то невзрачно. Однообразный текст, похожие друг на друга абзацы, таблицы без рамок, тоскливая черно-белая расцветка… Не помешает их как-то оформить. Вы так не считаете?.. За оформление Web-страниц и отдельных их элементов "отвечает" представление. Именно представление поможет нам оформить абзацы, таблицы и гиперссылки так, как хотим мы, а не Web-обозреватель (точнее, его разработчики). Именно представление поможет нам сделать Web-страницы привлекательными. Мы много раз упоминали о представлении, предвкушая момент знакомства с ним. И момент настал! Вся эта часть книги будет посвящена представлению Web- страниц и технологиям, используемым для его создания. А еще мы наконец-то займемся собственно Web-дизайном.
Понятие о стилях CSS
Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (Cascading Style Sheets, CSS), или просто таблиц стилей. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web- страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.
Каждый стиль должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки описываемые выбранным стилем параметры начинают применяться к данному элементу. Привязка может быть явная, когда мы сами указываем, какой стиль к какому элементу Web-страницы привязан, или неявная, когда стиль автоматически привязывается ко всем элементам Web-страницы, созданным с помощью определенного тега.
Таблица стилей может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; как мы помним из главы 1, она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.
Таблицы стилей пишут на особом языке, который так и называется — CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.
Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.
Создание стилей CSS
Обычный формат определения стиля CSS иллюстрирует листинг 7.1.
Откройте для себя мир чтения на siteknig.com - месте, где каждая книга оживает прямо в браузере. Здесь вас уже ждёт произведение Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов, относящееся к жанру Прочая справочная литература. Никаких регистраций, никаких преград - только вы и история, доступная в полном формате. Наш литературный портал создан для тех, кто любит комфорт: хотите читать с телефона - пожалуйста; предпочитаете ноутбук - идеально! Все книги открываются моментально и представлены полностью, без сокращений и скрытых страниц. Каталог жанров поможет вам быстро найти что-то по настроению: увлекательный роман, динамичное фэнтези, глубокую классику или лёгкое чтение перед сном. Мы ежедневно расширяем библиотеку, добавляя новые произведения, чтобы вам всегда было что открыть "на потом". Сегодня на siteknig.com доступно более 200000 книг - и каждая готова стать вашей новой любимой. Просто выбирайте, открывайте и наслаждайтесь чтением там, где вам удобно.
