Читайте также:
|
Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений, отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента web-страницы (или страницы целиком), затем на ней размечаются прямоугольные области, соответствующие отдельным подэлементам страницы (кнопка меню, меню целиком и т.п.), в соответствии с которыми производится нарезка изображения. Следующий пример демонстрирует способ создания графического меню.
<html>
<body>
<table cellpadding='0' cellspacing='0'>
<tr><td><a ><img src="menu-1.png" border="0"
alt="Новости"></a></td></tr>
<tr><td><a ><img src="menu-2.png" border="0" alt="О
компании"></a></td></tr>
<tr><td><a ><img src="menu-3.png" border="0"
alt="Услуги"></a></td></tr>
<tr><td><a ><img src="menu-4.png" border="0" alt="Прайс-
лист"></a></td></tr>
<tr><td><a ><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 ><img src="menu-1.png" border="0" alt="Новости"></a></td></tr>
<tr><td><a ><img src="menu-2.png" border="0" alt="О компании"></a></td></tr>
<tr><td><a ><img src="menu-3.png" border="0" alt="Услуги"></a></td></tr>
<tr><td><a ><img src="menu-4.png" border="0" alt="Прайс-лист"></a></td></tr>
<tr><td><a ><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 ><img src="left-1.png" border="0" alt="Интернет"></a></td>
</tr>
<tr>
<td><a ><img src="left-2.png" border="0" alt="Электронная почта"></a></td>
</tr>
<tr>
<td><a ><img src="left-3.png" border="0" alt="EmEditor"></a></td>
</tr>
<tr>
<td><a ><img src="left-4.png" border="0" alt="Photoshop"></a></td>
</tr>
<tr>
<td><a ><img src="left-5.png" border="0" alt="Word"></a></td>
</tr>
<tr>
<td><a ><img src="left-6.png" border="0" alt="SQL Manager"></a></td>
</tr>
<tr>
<td><a ><img src="left-7.png" border="0" alt="Excel"></a></td>
</tr>
<tr>
<td><a ><img src="left-8.png" border="0" alt="ImageReady"></a></td>
</tr>
<tr>
<td><a ><img src="left-9.png" border="0" alt="Все программы"></a></td>
</tr>
</table>
</td>
<td>
<table cellpadding='0' cellspacing='0'>
<tr>
<td><a ><img src="right-1.png" border="0" alt="Мои документы"></a></td>
</tr>
<tr>
<td><a ><img src="right-2.png" border="0" alt="Недавние документы"></a></td>
</tr>
<tr>
<td><a ><img src="right-3.png" border="0" alt="Мои рисунки"></a></td>
</tr>
<tr>
<td><a ><img src="right-4.png" border="0" alt="Моя музыка"></a></td>
</tr>
<tr>
<td><a ><img src="right-5.png" border="0" alt="Мой компьютер"></a></td>
</tr>
<tr>
<td><a ><img src="right-6.png" border="0" alt="Сетевое окружение"></a></td>
</tr>
<tr>
<td><a ><img src="right-7.png" border="0" alt="Панель управления"></a></td>
</tr>
<tr>
<td><a ><img src="right-8.png" border="0" alt="Принтеры и факсы"></a></td>
</tr>
<tr>
<td><a ><img src="right-9.png" border="0" alt="Справка и поддержка"></a></td>
</tr>
<tr>
<td><a ><img src="right-10.png" border="0" alt="Поиск"></a></td>
</tr>
<tr>
<td><a ><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 ><img src="bottom-2.png" border="0" alt="Выход из системы"></a></td>
<td><a ><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-кода
Фон
Тег <body> имеет два атрибута, которые позволяют определить фон. Фон можно задавать с помощью цвета или изображения.
Дата добавления: 2015-07-24; просмотров: 109 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Карты изображений, обрабатываемые браузером | | | Дополнительные примеры |