русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Создание графических меню


Дата добавления: 2013-12-23; просмотров: 1748; Нарушение авторских прав


Карты изображений, обрабатываемые на сервере

Карты изображений, обрабатываемые на сервере, описываются с помощью атрибута ismap тега <img>, располагающегося между тегами <a> - </a>, например:

<a href="tryhtml_ismap.htm"> <img src="figure_1.png" ismap></a>

Где "tryhtml_ismap.htm" – файл на сервере, описывающий координатные области изображения.

При использовании серверной обработки карт изображений на сервер передаются координаты курсора относительно изображения. В следующем примере при перемещении курсора по поверхности изображения в строке состояния вместе с именем файла обработчика отображаются координаты курсора.

<html><body><a href="tryhtml_ismap.htm"> <img src="figure_1.png" width="297" height="210" border="0" alt="Карта изображений" ismap></a></body></html>

Пример выполнения данного HTML-кода

Работая с картами изображений необходимо помнить, что при отключении отображения графики (например, при плохих каналах связи) работа с ними практически невозможна. При помощи атрибутов alt можно задать имена выделенным областям, но ориентироваться по такой карте изображений будет достаточно трудно, поэтому необходимо использовать карты изображения только в тех случаях, когда их присутствие целесообразно, например, в географических справочных системах, учебных системах, где необходима наглядность, и т.п. В этом случае признаком хорошего тона считается создание текстового меню, дублирующего ссылки на карте изображении.

Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений, отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента web-страницы (или страницы целиком), затем на ней размечаются прямоугольные области, соответствующие отдельным подэлементам страницы (кнопка меню, меню целиком и т.п.), в соответствии с которыми производится нарезка изображения. Следующий пример демонстрирует способ создания графического меню.



<html><body><table cellpadding='0' cellspacing='0'> <tr><td><a href=""><img src="menu-1.png" border="0" alt="Новости"></a></td></tr> <tr><td><a href=""><img src="menu-2.png" border="0" alt="О компании"></a></td></tr> <tr><td><a href=""><img src="menu-3.png" border="0" alt="Услуги"></a></td></tr> <tr><td><a href=""><img src="menu-4.png" border="0" alt="Прайс- лист"></a></td></tr> <tr><td><a href=""><img src="menu-5.png" border="0" alt="Контакты"></a></td></tr></table></body></html>

Пример выполнения данного HTML-кода

Чтобы понять, как нарезано изображение, достаточно при отображении таблицы установить параметр border:

<html><body><table cellpadding='0' cellspacing='0' border> <tr><td><a href=""><img src="menu-1.png" border="0" alt="Новости"></a></td></tr> <tr><td><a href=""><img src="menu-2.png" border="0" alt="О компании"></a></td></tr> <tr><td><a href=""><img src="menu-3.png" border="0" alt="Услуги"></a></td></tr> <tr><td><a href=""><img src="menu-4.png" border="0" alt="Прайс-лист"></a></td></tr> <tr><td><a href=""><img src="menu-5.png" border="0" alt="Контакты"></a></td></tr></table></body></html>

Пример выполнения данного HTML-кода

Стандартное меню "Пуск" Windows

<html><body><table cellpadding='0' cellspacing='0'> <tr> <td colspan="2"><img src="top.png"></td></tr> <tr> <td> <table cellpadding='0' cellspacing='0'> <tr> <td><a href=""><img src="left-1.png" border="0" alt="Интернет"></a></td> </tr> <tr> <td><a href=""><img src="left-2.png" border="0" alt="Электронная почта"></a></td> </tr> <tr> <td><a href=""><img src="left-3.png" border="0" alt="EmEditor"></a></td> </tr> <tr> <td><a href=""><img src="left-4.png" border="0" alt="Photoshop"></a></td> </tr> <tr> <td><a href=""><img src="left-5.png" border="0" alt="Word"></a></td> </tr> <tr> <td><a href=""><img src="left-6.png" border="0" alt="SQL Manager"></a></td> </tr> <tr> <td><a href=""><img src="left-7.png" border="0" alt="Excel"></a></td> </tr> <tr> <td><a href=""><img src="left-8.png" border="0" alt="ImageReady"></a></td> </tr> <tr> <td><a href=""><img src="left-9.png" border="0" alt="Все программы"></a></td> </tr> </table> </td> <td> <table cellpadding='0' cellspacing='0'> <tr> <td><a href=""><img src="right-1.png" border="0" alt="Мои документы"></a></td> </tr> <tr> <td><a href=""><img src="right-2.png" border="0" alt="Недавние документы"></a></td> </tr> <tr> <td><a href=""><img src="right-3.png" border="0" alt="Мои рисунки"></a></td> </tr> <tr> <td><a href=""><img src="right-4.png" border="0" alt="Моя музыка"></a></td> </tr> <tr> <td><a href=""><img src="right-5.png" border="0" alt="Мой компьютер"></a></td> </tr> <tr> <td><a href=""><img src="right-6.png" border="0" alt="Сетевое окружение"></a></td> </tr> <tr> <td><a href=""><img src="right-7.png" border="0" alt="Панель управления"></a></td> </tr> <tr> <td><a href=""><img src="right-8.png" border="0" alt="Принтеры и факсы"></a></td> </tr> <tr> <td><a href=""><img src="right-9.png" border="0" alt="Справка и поддержка"></a></td> </tr> <tr> <td><a href=""><img src="right-10.png" border="0" alt="Поиск"></a></td> </tr> <tr> <td><a href=""><img src="right-11.png" border="0" alt="Выполнить..."></a></td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <table cellpadding='0' cellspacing='0'> <tr> <td><img src="bottom-1.png"></td> <td><a href=""><img src="bottom-2.png" border="0" alt="Выход из системы"></a></td> <td><a href=""><img src="bottom-3.png" border="0" alt="Выключение"></a></td> </tr> </table> </td> </tr></table></body></html>

Пример выполнения данного HTML-кода

На примере меню Пуск" Windows XP представлен способ организации сложных несимметричных графических меню с использованием вложенных таблиц. В данном случае используется внешняя таблица для разделения изображения на верхнюю, нижнюю, левую и правую области, и три вложенных таблицы для реализации левого, правого и нижнего графического меню.

Теги изображений
Тег Описание
<img> Определяет изображение
<map> Определяет карту ссылок
<area> Определяет активную область внутри карты ссылок

 

8. Лекция: Фон страницы в HTML

 

Немаловажную роль играет фон, используемый на сайте. Хороший фон может существенно улучшить внешний вид Web-сайта, а при неправильном подборе цветовой схемы читаемость ваших страниц значительно ухудшится, что вызовет негативные ощущения у посетителей сайта. И у них не возникнет желания вернуться сюда еще раз. Рассмотрим все вышеизложенное на примере. В первом примере представлено хорошее сочетание фона и текста, а во втором наоборот, комбинация, использование которой совершенно не рекомендуется.

Хороший цвет фона и текста

<html><body bgcolor="#d0d0d0"><h1>Хороший цвет фона и текста</h1><p>Пример комбинации цвета фона и цвета текста, которая позволяет без проблем читать текст на странице.</p></body></html>

Пример выполнения данного HTML-кода

Плохой цвет фона и текста

<html><body bgcolor="#ffffff" text="yellow"><h1>Плохой цвет фона и текста</h1><p>Пример комбинации цвета фона и цвета текста, которая создает трудности при чтении текста на странице.</p></body></html>

Пример выполнения данного HTML-кода



<== предыдущая лекция | следующая лекция ==>
Карты изображений, обрабатываемые браузером | Дополнительные примеры


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.003 сек.