ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 02.04.2024
Просмотров: 408
Скачиваний: 0
СОДЕРЖАНИЕ
Как списки помогают организовать нам информацию
Как создать список на вашей странице
Объединение нескольких столбцов в одну ячейку
Предварительное форматирование
Где вы сможете найти графику, изображения и рисунки
Как поместить изображение на страницу
Оптимальные размеры изображений
Как браузеры работают с прозрачными изображениями
Создание прозрачных gif-изображений
Создание якоря и присвоение ему якоря
Компоновка ссылок в виде списков
Текст ссылок должен быть понятным
Как работают изображения-карты
Изображения-карты не являются новой технологией
Различия между серверными и клиентскими изображениями-картами
Разбиение изображения на фрагменты
Совершенствования веб-страницы
Развертывание веб-страницы в веб-узел
Уроки html'а. Урок # 13.
Цвет ссылки
Вы можете изменить цвет текста ссылки. Мы уже говорили как заменять цвета простого текста с помощью тега <body>. Это было на на первом уроке, где также описано как изменить цвет ссылок во всем документе. Но можно заменить цвет ссылки еще и тегом <font>. Посмотрите:
<a href="http://cray.vision.krg.kz/~Sam/dlab"><font color="green">Design Lab</font></a>
Поглядите как будет выглядеть такая ссылка на практике: Design Lab
Использование изображений для ссылок
В качестве средства ссылок на другие веб-страницы, можно использовать не только текст, но и изображения. В предыдущей главе рассказано о том, как помещать изображения на веб-страницу. Теперь вы узнаете, как сделать их так сказать ссылочными :). Это означает, что, когда вы кликаете мышью на изображении, на экран выводится другой веб-документ, ссылкой на который и служило это изображение.
Так же, как вы ссылались на другой документ с помощью текста, вы можете сослаться на него с помощью изображения. Нужно только вместо текста ссылки задать изображение. По умолчанию браузеры обнаруживают изображение с синей рамкой. Кликнув мышью в любом месте этого изображениея, посетители переходят на соответствующий документ. В качестве ссылок на веб-документы вы можете использовать любые виды изображений, рисунков и пиктограмм.
Очень популярны также изображения-карты. В качестве изображения-карты может применяться веб-графика любого типа. Такое изображение открывает различные файлы в зависимости от того, на каком фрагменте был произведен щелчок мышью. На следующих уроках вы узнаете об этом поподробее.
Давайте представим что нужно вставить графический рисунок Design Laboratory на страничку. Посмотрите на это:
Как вы видите синего бордюра обрамляющего картинку нет. В тег <img> я добавил ключевое слово border="0", дающее команду "отключить обрамление". Посмотрите теперь на код изображения: <a href="http://cray.vision.krg.kz/~Sam/dlab"><img border="0" src="dlab.gif"></a>
Обратите внимание, якорь остался тем же, он ссылается на сайт Design Laboratory, но вместо текста я ввел тег <img>. Вот так просто задаются графические ссылки.
Якоря
Теперь вы большой знаток по HTML-ссылкам, умеете отсылать посетителей своей домашней страницы к любому другому файлу в Интернете. Однако есть еще несколько способов применения тегов <a> и </a>. Особо стоит отметить их использование в качестве внутренних ссылок и указателей.
Предположим, вы взяли большую книгу и хотите прочесть в ней только главу 26. Вместо этого вы обратитесь к оглавлению, найдете, где начинается нужная глава, и сразу отправить туда.
Так же работают якорные теги. Если у вас большой HTML-документ, в различных его местах нужно поставить якоря. Так, если бы толстая книга существовала в виде одного большого HTML-файла, логично было бы установить якорь в начале каждой главы. В начале HTML-файла нужно сделать оглавление, ссылающееся на каждый якорь в вашем файле (или на каждую главу). Если посетитель кликнет на якоре с меткой "глава 26", браузер автоматически перенесет его на якорь "глава 26" в том же файле; ему не придется просматривать бесчисленное количество страниц с информацией. Не забывайте, что якоря предназначены только для работы в одном большом HTML-файле. Чтобы организовать несколько файлов, применяйте гипертекстовые ссылки.
Давайте возьмем в качестве примера веб-узел, использующий якорные теги. Поглядите на этот сайт. Здесь вы найдете онлайновую книгу HTML Quick Reference. Этот узел содержит полный текст книги. Он разбит на несколько отдельных HTML-файлов, но в каждом HTML-файле есть несколько подразделов. Вы можете просмотреть оглавление и кликнуть на заголовке того раздела, который вас интересует, после чего немедленно увидите нужную часть HTML-страницы.
Якоря действуют так же, как и ссылки на другие документы в Интернете, только ссылки происходят на внутренние метки документа. Как и с обычными ссылками, вы можете использовать сколько угодно якорей и тегов, но не переборщите.
Разработчики веба часто называют применяемые таким образом якорные теги флажками.
Создание якоря и присвоение ему якоря
Работа с якорными тегами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться. Во-вторых, введите теги <a href="..">, указывающие на эти разделы.
Вы можете вводить именные якоря в любом месте ваших веб-страниц. Каждый тег позволяет непосредственно перейти в нужное место с помощью ссылки. В данном примере я помещу четыре якорных тега и ссоветствующие им ссылки.
|
<a href="#raz1">Переход к разделу 1</a><br> <a href="#raz2">Переход к разделу 2</a><br> <a href="#raz3">Переход к разделу 3</a><br> <a href="#raz4">Переход к разделу 4</a><br> <br> <a name="raz1">Раздел 1</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz2">Раздел 2</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz3">Раздел 3</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> <a name="raz4">Раздел 4</a><br> Ваш текст<br> ...<br> ...<br> ...<br> Ваш текст<br> |
"<a href="#raz1">Переход к разделу 1</a>" - этой строчкой мы обозначили якорным тегом имя Переход к разделу 1. Чтобы перейти на этот тег, посетитель должен кликнуть на флажке с именем raz1. Посмотрите, к чему привел этот код, и немного "подрессеруйтесь" :).
|
Переход к разделу 1 Переход к разделу 2 Переход к разделу 3 Переход к разделу 4 Раздел 1 Ваш текст ... ... ... Ваш текст Раздел 2 Ваш текст ... ... ... Ваш текст Раздел 3 Ваш текст ... ... ... Ваш текст Раздел 4 Ваш текст ... ... ... Ваш текст |
Задать якорь, как вы убедились, довольно легко.
Ссылка на якорь
После того как вы установили все необходимые якоря, настала пора составить оглавление, содержащее ссылки на каждый из якорей.
Ссылка на якорь очень напоминает стандартную ссылку. Для этого используется тег <a href="...">. Отличие в том, что вам надо сообщить браузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #. Для задания ссылки на раздел нашей "золотой" страничке, я использовал тег: <a href="#raz4">Переход к разделу 4</a><br>
Символ # указывает браузеру, что следует искать флажок, а не страничку. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при клике на таком тексте он перейдет не на отдельный HTML-файл, а на якорь, расположенный в той-же странице что и ссылка на него.
Компоновка ссылок в виде списков
Применяя на веб-странице ссылки, важно распологать их организованно, в определенном порядке, чтобы они были понятны и ими было легко пользоваться. Каждый раз, добавив очередной фрагмент HTML, убедитесь, что страница осталась огранизованной и читаемой.
Ссылки часто компонуют в виде списка. Раньше мы уже говорили о списках. Упоминалось и о том, что списки могут представлять собой множество отдельных фрагментов информации в четком маркированном виде. Списки очень удобны, если вы хотите использовать целый ряд ссылок. Например, у каждого есть своя подборка интересных веб-страниц. В нашем списке мы перечислим ряд мест, которые любит посещать веб-народ. Если бы эти ссылки не были расположены в виде спика, они представляли бы собой бесполезныю мешанину. Итак, смотрите:
|
Design Laboratory - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров. ADG Design - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа. WebMaster - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов. |
Ну думаю достаточно... Посмотрите на код и все станет ясно:
|
<li><a href="http://cray.vision.krg.kz/~Sam/dlab">Design Laboratory</a> - сайт для веб-народа. Большая коллекция графики, софтины и прочеих полезностей для вебмастеров.<br> <li><a href="http://dweb.ru">AGS Design</A> - проект моего "односельчанина" :) Дмитрия Давыденко. Самый универсальный проект для веб-народа.<br> <li><a href="http://gif.lgg.ru">WebMaster</a> - сайт для веб-народа. Коллекция клипартов, графики, скриптов и прочих инструментов.<br> |
Полезные советы
Умение пользоваться гиперссылками является мощным средством веб-страниц. Однако наряду с увеличением гибкости появляется опасность сделать веб-страницу более запутанной и сложной для посетителей.
Ниже я приведу ряд полезных советов относительно применения ссылок. Некоторые из них вытекают просто из здравого смысла, другие же покажутся менее очевидными. Следуя этим советам, вы не усложните веб-страницу при использовании ссылок.
Пусть ссылок будет не слишком много
Нельзя представить себе ничего более замкнутого, чем веб-страница, содержащая текст из 200 слов, из которых 180 являются ссылками на другие веб-ресурсы. Поскольку текст на ссылки подчеркивается, слишком большое число ссылок в абзаце (или на странице) делает его нечитаемым, и вряд ли это понравится посетителям.
Посещение веб-страниц во многом напоминает разглядывание витрин магазинов. Если у магазина некрасивая, беспорядочная ветрина, вам вряд ли захочется тудай зайти. Помните об этом при использовании ссылок. Если вы все же хотите ввести множество ссылок, подумайте о создании простого (но хорошо организованного) списка в конце страницы.