В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 16. Внутристраничные ссылки (якоря)



Если на Вашей странице очень много материала и Вы опасаетесь, что посетитель сайта может в нём запутаться, можно сделать внутристраничные ссылки или, как их иногда называют, "якоря". Иными словами - действующее оглавление на странице. Пример такой страницы можно увидеть здесь:

Панаева. Воспоминания

К примеру, нажав на ссылку "Глава третья", браузер переметит Вас на то место на странице, где начинается третья глава.
Сделать такое оглавление очень просто.

В "содержании" мы ставим вот такую ссылку: <a href="#kuk"><H3> Глава третья </H3> </a>
а в тексте, где начинается третья глава, прописываем такой "якорь":
<a name="kuk"> <H2> Глава третья </H2> </a>

Заголовки H3 и H2 взяты произвольно. Можно их сделать одинаковыми, или такими, какими хотите. Самое главное тут - атрибут name, который указывает браузеру, в какое место страницы ему следует отправиться. Значение у нашего name прописано "kuk". Здесь можно написать любое слово. Главное, чтобы оно было написано латиницей и полностью совпадало со словом, прописанном в адресе ссылки, в содержании. В данном случае, я взяла три первые буквы фамилии "Кукольник", о котором рассказывает данная глава воспоминаний Панаевой.

Если Вы хотите сделать оглавление на другой странице, в ссылке оглавления следует прописать полный адрес, например:
<a href="http://dugward.ru/library/zolot/panaeva_vosp.html#kuk"> <H3> Глава третья </H3> </a>

name на странице с текстом остаётся то же самое.

Можно в конце каждой главы поставить ссылку "Вернуться к содержанию". Вдруг пользователю покажется слишком нудным крутить обратно колесо прокрутки, чтобы вернуться на содержание (Я лично в таких случаях нажимаю на браузере стрелочку "назад").
Мы можем сделать ссылку "Вернуться к содержанию". Это будет выглядеть так:
под третьей главой мы пишем:
<a href="#soderganije"> <H3> Вернуться к содержанию </H3> </a>

А в начале самого содержания мы прописываем:
<a name="soderganije"> <H2>СОДЕРЖАНИЕ</H2> </a>




Перейти к Уроку 17

© А.М. Возлядовская. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

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

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг