|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Инспектор
Вы можете этот курс.
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:
Изображения в HTML
Создание графических меню
Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений, отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента 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 представлен способ организации сложных несимметричных графических меню с использованием вложенных таблиц. В данном случае используется внешняя таблица для разделения изображения на верхнюю, нижнюю, левую и правую области, и три вложенных таблицы для реализации левого, правого и нижнего графического меню.
