Тема «Основы сайтостроения» Н. Угринович, 9 класс
Урок №5. Работаем с тегом МАР.
Алгоритм создания меню на картинке
Алгоритм создания картинки в OpenOffice Draw
· Открыть OODraw – Включить сетку : Вид- Сетка- Показать сетку
· Нарисовать прямоугольник: Панель инструментов Рисование- Прямоугольник- Выбрать цвет заливки – Например, Текстура- Небо
· Щелкнуть дважды для ввода текста, например, Введение- Выбрать цвет текста- например, темно синий, 18, Arial
· Выделить прямоугольник и продублировать его столько раз, сколько будет пунктов меню: Правка- Дублировать – Число копий
· «Растащить» копии по экрану, примерно так, как будет выглядеть меню
· Сохранить так: Файл- Экспорт- Формат файла jpg – Имя файла, например, menu_map- сохранить
· Картинка сохранена, но она имеет размер в формате листа А4, а потому ее надо обрезать по контуру
Алгоритм обрезки картинки по контуру
· Открыть картинку в программе Microsoft Office Picture Manager
· Выбрать вкладку Изменить рисунки- Обрезка- ОК- Сохранить
· Картинка готова
Дизайн страницы
Код страницы index.htm (Можно делать в редакторе FrontPage)
<html>
<head>
<title>мой проект</title>
</head>
<body>
<table border="0" width="100%">
<tr>
<td width="334">
<img border="0" src="pic/3dcd.gif" width="50" height="46">
</td>
<td>
<p align="center">
<font color="#008080" size="5">МОЙ ПРОЕКТ</font>
</td>
</tr>
<tr>
<td width="334">
<map name="karta1">
<area rel="nofollow ugc" target="_blank" href="vved.htm" shape=rect coords="3,7,318,58" alt="введение">
<area rel="nofollow ugc" target="_blank" href="osn.htm" shape=rect coords="3,66,318,109" alt="основная часть">
<area rel="nofollow ugc" target="_blank" href="zakl.htm" shape=rect coords="111,143,172,107" alt="заключение">
</map>
<img src=menu_map.jpg usemap="#karta1" width="327" height="348">
</td>
<td>Мой проект предназначен тем, кто не равнодушен к поэзии. Кто хочет узнать можно ли научиться писать стихи или это могут делать только избранные
<p> <img border="0" src="pic/write2.jpg" width="229" height="150">
</td>
</tr>
</table>
</body>
</html>
Рабочие листы
к вашим урокам
Скачать
Урок №5 - продолжение урока №4
Тег МАР (парный) позволяет работать с изображением как навигационной картой, так как изображение визуально можно представить в виде отдельных фрагментов - геометрических областей. На каждом фрагменте может срабатывать ссылка на другую страничку или происходить вызов событийного окна с соответствующим текстом.
В уроке представлен алгоритм создания меню на картинке.
Поскольку все методические рекомендации есть в тексте урока, то учащиеся получают конспект урока и работают максимально самостоятельно.
6 650 848 материалов в базе
Настоящий материал опубликован пользователем Осипова Светлана Леонидовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс профессиональной переподготовки
500/1000 ч.
Мини-курс
6 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.