Среда, 08.01.2025, 20:38
Главная Регистрация RSS поиск
Приветствую Вас, Гость
Меню сайта
Категории раздела
HTML [44]
Visual C++ и MFC [21]
c++ [78]
php [19]
Javascript [15]
C# [51]
загрузки [0]
XNA [10]
создание игр с помощью xna
Наш опрос
Каким языком программирования вы увлекаетесь
Всего ответов: 2420
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
Главная » Статьи » HTML

7.3 Практический пример
Урок №6: Таблицы (часть 1)

Для закрепления полученных знаний и практического их применения, предлагаю разобрать несложный пример, заключающийся в разметке страницы с меню на основе карты ссылок.

Вот предлагаемый шаблон:


Рис. №7.3.1. Предлагаемый шаблон для разметки

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

Вот так, примерно, можно разрезать этот шаблон в ImageReady:


Рис. №7.3.2. Slices в ImageReady

Настроив параметры фрагментов (формат и параметры сохранения, тип, ссылку, текст, выравнивание и пр.), сохраняем оптимизированный результат в XHTML документ с рисунками. Среди прочих полученных изображений, для нас наибольший интерес преставляет собственно меню. Это изображение 4-го по номеру фрагмента (дайте ему осмысленное имя при разрезании) - menu_map.gif в нашем случае.

Откройте данное изображение в ImageReady и создайте в нем ссылки следующим образом:


Рис. №7.3.3. Карта ссылок

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

Теперь необходимо скопировать код (с элементом <map> включительно) в нашу страницу, полученную этапом ранее. Разместите код карты ссылок в самом начале содержимого документа, сразу за начальным тэгом <body>. Затем, в элемент для вставки изображения "menu_map.gif" необходимо добавить атрибуты  border="0" и  usemap="имя карты" (см. выше).

Категория: HTML | Добавил: slava (18.07.2009)
Просмотров: 1125 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]