Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:

Изображения в HTML

< Лекция 6 || Лекция 7: 12345 || Лекция 8 >

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

Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений, отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента 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> Определяет активную область внутри карты ссылок
< Лекция 6 || Лекция 7: 12345 || Лекция 8 >
Анна Королёва
Анна Королёва

Пожалуйста, уточните, кто автор курса Основы работы с HTML ?

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Цагана Бадмаева
Цагана Бадмаева
Россия, РЭУ им.Плеханова
Rustam Asrankulov
Rustam Asrankulov
Россия