Наиболее часто изображения в Web используются при создании графических систем навигации. Ссылки, применяемые для путешествия по сайту, могут быть представлены в виде графических кнопок (рис. 3.4) или ярлыков в папках для бумаг (рис. 3.5).
Пример. Метод связывания графики так же прост, как связывание текста. Изображение помещается внутрь элемента-ссылки:
<а href="foo.html"ximg src="bar.gif" alt="bar" /></a>
Для меню навигации мы создали три кнопки и присвоили им метки opt ion 1,
option 2,option 3.
Совет
Эти кнопки сделаны с помощью эффектов Paint Shop Pro 6. Данная программа распространяется свободно. Такими элементами управления снабжено большинство современных графических редакторов.
Каждая кнопка будет размещаться внутри собственного элемента-ссылки, связанного с соответствующей страницей выбора:
<а href="optionl.html"><img src ="optl.gif" аИ="вариант 1" width="100" height="60" /></а>
<a href="option2 .html "ximg src= " opt2 . gif " аИ="вариант 2" width="100" height="60"/></a>
<a href="option3 .html "ximg src= " opt3 . gif " аИ="вариант 3" width="100" height="60" /></a>
Окончательный вариант документа представлен на рис. 3.6. Обратите внимание на две детали: границы рисунков обведены яркой линией, а между соседними изображениями - пустое пространство.
Большинство браузеров подчеркивает текстовые ссылки и выделяет их голубым цветом. Поскольку эта функция браузера влияет на вид компонентов управления (в данном случае на кнопки), от нее можно отказаться, добавив в описание элемента рисунок атрибут border (граница). Установка нулевого значения данного атрибута предписывает браузеру выключить отображение границы картинки:
<img src="optl.gif" alt="вариант 1" width="100" height="60" border="0" />
В HTML-документе все элементы можно разместить на одной линии текста. Браузеры обрабатывают символы «новая строка» или «возврат каретки/новая строка» так, как они отображаются большинством Windows- и Mac-редакторов -пробелами. Размещая элементы связи в одной строке, вы удаляете лишние пробелы между изображениями (рис. 3.7).
Опубликовал vovan666
April 05 2013 12:34:56 ·
0 Комментариев ·
3323 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
