Скачать презентацию Web-дизайн Лекции 2009 — 2014 1 Лекция Скачать презентацию Web-дизайн Лекции 2009 — 2014 1 Лекция

Web-дизайн презентация 2014.ppt

  • Количество слайдов: 47

Web-дизайн Лекции 2009 - 2014 1 Web-дизайн Лекции 2009 - 2014 1

Лекция 1 Основные правила web-дизайна Правило 1. Это удобство конечного пользователя. В современном Интернете Лекция 1 Основные правила web-дизайна Правило 1. Это удобство конечного пользователя. В современном Интернете принято молчаливое соглашение о том, что - профессиональный сайт должен корректно отображаться при экранном разрешении 640 x 480 точек с цветовой палитрой в 256 цветов. Правило 2. Web-страница должна идентично отображаться в Microsoft Internet. Explorer и других браузерах. Правило 3. Все страницы web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему. Правило 4. Созданная web-страница должна обязательно включать навигационные элементы, охватывающие все разделы сайта, причем эти элементы должны всегда быть на виду. Правило 5. Необходимо выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта. Правило 6. Текст должен без труда читаться, при этом читатель не должен напрягать зрение, его глаза не должны уставать. Перечень цветовых сочетаний рисованного объекта или текста с фоном в 2 порядке ухудшения зрительного восприятия:

 • синее на белом; • черное на желтом; • зеленое на белом; • • синее на белом; • черное на желтом; • зеленое на белом; • черное на белом; • зеленое на красном; • красное на желтом; • красное на белом; • оранжевое на черном; • черное на пурпурном; • оранжевое на белом; • красное на зеленом. 3

Правило 7. В любом случае для текста рекомендуется выбирать традиционный, привычный глазу черный цвет, Правило 7. В любом случае для текста рекомендуется выбирать традиционный, привычный глазу черный цвет, в качестве фона лучше всего использовать тусклую, едва различимую заливку произвольного оттенка. Однако наиболее «правильным» решением всегда был и остается «классический» вариант: черным по белому. 4

Дерево документа HTML <TITLE> Моя главная страница </TITLE> тэг Закрывающий тэг 5 Дерево документа HTML Моя главная страница тэг Закрывающий тэг 5

Дерево документа HTML <HTML> HEAD T I T L E BODI UL P ОL Дерево документа HTML HEAD T I T L E BODI UL P ОL H 1…H 6 тэг Закрывающий тэг 6

" src="https://present5.com/presentation/-69424153_342381267/image-7.jpg" alt="Пример документа-источника, кодированного в HTML " /> Пример документа-источника, кодированного в HTML Моя главная страница Моя главная страница

Добро пожаловать в мою домашнюю страницу!

Великие композиторы:

  • Чайковский
  • Брамс
  • Шопен
7

Основные тэги <HTML> -документ HTML <HEAD> -голова документа <TITLE> -заголовок сайта <BODY> - тело Основные тэги -документ HTML -голова документа -заголовок сайта <BODY> - тело документа <H 1>, <H 2>, <H 3>, <H 4>, <H 5>, <H 6> - заголовок <P> - абзац <UL> - маркированный список <LI> - список <ОL> - нумерованный список <LI> - список <BR> - переход на новую строку 8 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Форматирование текста Тэг <Р> атрибут ALIGN= свойства right, center, left <P ALIGN="CENTER">ИBAH-ЦAPEBИЧ И СЕРЫЙ" src="https://present5.com/presentation/-69424153_342381267/image-9.jpg" alt="Форматирование текста Тэг <Р> атрибут ALIGN= свойства right, center, left <P ALIGN="CENTER">ИBAH-ЦAPEBИЧ И СЕРЫЙ" /> Форматирование текста Тэг <Р> атрибут ALIGN= свойства right, center, left <P ALIGN="CENTER">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ <BR> сказка</Р> <P ALIGN="RIGHT">Hy, погоди!. . </P> <BR> 9 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Форматирование заголовка тег <DIV> и </DIV> - оформление абзаца <H 1><DIV ALING="сеntег">Главная страница сайта</DIV></Н" src="https://present5.com/presentation/-69424153_342381267/image-10.jpg" alt="Форматирование заголовка тег <DIV> и </DIV> - оформление абзаца <H 1><DIV ALING="сеntег">Главная страница сайта</DIV></Н" /> Форматирование заголовка тег <DIV> и </DIV> - оформление абзаца <H 1><DIV ALING="сеntег">Главная страница сайта</DIV></Н 1> Горизонтальная линейка <HR WIDTH="75%"> - от 1% до 100% 10 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Управление шрифтом <FONT> с атрибутом SIZE= <FONT SIZE="+1"> и <FONT SIZE="-1"> - указывается относительный" src="https://present5.com/presentation/-69424153_342381267/image-11.jpg" alt="Управление шрифтом <FONT> с атрибутом SIZE= <FONT SIZE="+1"> и <FONT SIZE="-1"> - указывается относительный" /> Управление шрифтом <FONT> с атрибутом SIZE= <FONT SIZE="+1"> и <FONT SIZE="-1"> - указывается относительный размер шрифта <FONT SIZE="1"> - абсолютный размер шрифта или <BASEFONT SIZE="6"> <I> и </I> курсив <CITY></CITY> <Н 2> <Р АLIGN+"center">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ <ВК> <I>сказка</I> </Р> </Н 2> <В>Сергей Сергеев</В> полужирный шрифт <U> и </U> - подчеркивание <STRIKE> Старая цена: <STRIKE>168 рублей </STRIKE> Новая цена: <FONT SIZE="+1">102 рубля</FONТ> 11 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Цветовое оформление атрибут ТЕХТ= и атрибут BGCOLOR= Атрибут ТЕХТ= определяет цвет текста на страничке," src="https://present5.com/presentation/-69424153_342381267/image-12.jpg" alt="Цветовое оформление атрибут ТЕХТ= и атрибут BGCOLOR= Атрибут ТЕХТ= определяет цвет текста на страничке," /> Цветовое оформление атрибут ТЕХТ= и атрибут BGCOLOR= Атрибут ТЕХТ= определяет цвет текста на страничке, а атрибут BGCOLOR= — цвет фона. Названия цветов можно вводить по названиям: "black" (черный), "white" (белый), "yellow" (желтый), "green" (зеленый), "fuchsia" (сиреневый) и т. д. 12 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шестнадцатеричный номер цвета должен состоять из шести цифр. Первые две означают интенсивность красной составляющей," src="https://present5.com/presentation/-69424153_342381267/image-13.jpg" alt="Шестнадцатеричный номер цвета должен состоять из шести цифр. Первые две означают интенсивность красной составляющей," /> Шестнадцатеричный номер цвета должен состоять из шести цифр. Первые две означают интенсивность красной составляющей, вторые две — зеленой и последние две — синей. Таким образом, красный цвет обозначается как FF 0000, зеленый — 00 FF 00 синий — 0000 FF. черный – 000000 белый — FFFFFF. Можно поэкспериментировать с интенсивностью каждой составляющей отдельно. Если FF 0000 — это красный цвет, 880000 — уже темно-красный, 440000 — красно-коричневый; 220000 похож на коричневый, а 110000 — черный с красноватым оттенком. Точно так же 00 FF 00 — это яркий зеленый, 00 АА 00 — приятный лиственно-зеленый, 007700 — темно-зеленый, 003300 — очень темный зеленый и 001100 — черный с зеленоватым оттенком. 13 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Перед шестнадцатеричным номером цвета необходимо поставить знак #. <BODY BGCOLOR="#BABAAO" TEXT="#1 D 1 D" src="https://present5.com/presentation/-69424153_342381267/image-14.jpg" alt="Перед шестнадцатеричным номером цвета необходимо поставить знак #. <BODY BGCOLOR="#BABAAO" TEXT="#1 D 1 D" /> Перед шестнадцатеричным номером цвета необходимо поставить знак #. <BODY BGCOLOR="#BABAAO" TEXT="#1 D 1 D 18"> 14 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Гиперссылки бывают трех типов: • ссылки в другие места той же страницы; • ссылки" src="https://present5.com/presentation/-69424153_342381267/image-15.jpg" alt="Гиперссылки бывают трех типов: • ссылки в другие места той же страницы; • ссылки" /> Гиперссылки бывают трех типов: • ссылки в другие места той же страницы; • ссылки на другие страницы этого же сайта или сервера; • ссылки на страницы, расположенные на любом другом сервере в Интернете. Локальные гиперссылки <А> <A NAME="skazka">ИВАН- ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ </А> NAME= — имя якоря <A HREF="#skazka">Сказка Иван-царевич и серый заяц</А> 15 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Цвет гиперссылки атрибута VLINK= тега <BODY> цвет гиперссылки, которыми читатель еще не пользовался атрибут" src="https://present5.com/presentation/-69424153_342381267/image-16.jpg" alt="Цвет гиперссылки атрибута VLINK= тега <BODY> цвет гиперссылки, которыми читатель еще не пользовался атрибут" /> Цвет гиперссылки атрибута VLINK= тега <BODY> цвет гиперссылки, которыми читатель еще не пользовался атрибут ALINK=“посещенные” гиперссылки – другой цвет. 16 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Гиперссылки в пределах сайта <A HREF="skazka. html">CKА 3 KА; ИBАHцаревич и серый зaяц; </A>;" src="https://present5.com/presentation/-69424153_342381267/image-17.jpg" alt="Гиперссылки в пределах сайта <A HREF="skazka. html">CKА 3 KА; ИBАHцаревич и серый зaяц; </A>;" /> Гиперссылки в пределах сайта <A HREF="skazka. html">CKА 3 KА; ИBАHцаревич и серый зaяц; </A>; <A HREF="rasskaz. html"> Paccкaз; Moлоток; </A> 17 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Внешние гиперссылки <А HREF="http: //www. altavista. com"> "Altavista" </А> 18 " src="https://present5.com/presentation/-69424153_342381267/image-18.jpg" alt="Внешние гиперссылки <А HREF="http: //www. altavista. com"> "Altavista" </А> 18 " /> Внешние гиперссылки <А HREF="http: //www. altavista. com"> "Altavista" </А> 18 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Списки • Маркированные <UL> <LI> </UL> • Нумерованные списки <OL> <LI> </OL> Каждый элемент" src="https://present5.com/presentation/-69424153_342381267/image-19.jpg" alt="Списки • Маркированные <UL> <LI> </UL> • Нумерованные списки <OL> <LI> </OL> Каждый элемент" /> Списки • Маркированные <UL> <LI> </UL> • Нумерованные списки <OL> <LI> </OL> Каждый элемент списка должен быть при этом обозначен тегом <LI> , который можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать: • <LI>Вкручивание электрических лампочек или • <LI>Вкручивание электрических лампочек</LI> 19 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Вложенные списки <UL> </UL> 20 " src="https://present5.com/presentation/-69424153_342381267/image-20.jpg" alt="Вложенные списки <UL> </UL> 20 " /> Вложенные списки <UL> </UL> 20 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Списки определений Алфавитные списки определений: <A HREF="#Bukva. V">B</A> - ссылка <A NAME="Bukva. V">B</A> -" src="https://present5.com/presentation/-69424153_342381267/image-21.jpg" alt="Списки определений Алфавитные списки определений: <A HREF="#Bukva. V">B</A> - ссылка <A NAME="Bukva. V">B</A> -" /> Списки определений Алфавитные списки определений: <A HREF="#Bukva. V">B</A> - ссылка <A NAME="Bukva. V">B</A> - якорь 21 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Создание таблиц <TABLE> <TR> - строка таблицы <TD> - ячейки таблицы <TABLE BORDER="3"> <TR>" src="https://present5.com/presentation/-69424153_342381267/image-22.jpg" alt="Создание таблиц <TABLE> <TR> - строка таблицы <TD> - ячейки таблицы <TABLE BORDER="3"> <TR>" /> Создание таблиц <TABLE> <TR> - строка таблицы <TD> - ячейки таблицы <TABLE BORDER="3"> <TR> <TD> Это уже таблица! </TD> </TR> </TABLE> 22 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Основные атрибуты таблицы • WIDTH= ширина • BORDER= бордюр • CELLPADDING= отступ от края" src="https://present5.com/presentation/-69424153_342381267/image-23.jpg" alt="Основные атрибуты таблицы • WIDTH= ширина • BORDER= бордюр • CELLPADDING= отступ от края" /> Основные атрибуты таблицы • WIDTH= ширина • BORDER= бордюр • CELLPADDING= отступ от края ячейки <TABLE WIDTH="50%" BORDER="3" CELLPADDING="20"> <TR> <TD> Это уже таблица! </TD> </TR> </TABLE> 23 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Цветовое оформление таблицы • BORDERCOLOR= цвет бордюра • BORDERCOLORLIGHT= задают цвет светлой сторон рамки" src="https://present5.com/presentation/-69424153_342381267/image-24.jpg" alt="Цветовое оформление таблицы • BORDERCOLOR= цвет бордюра • BORDERCOLORLIGHT= задают цвет светлой сторон рамки" /> Цветовое оформление таблицы • BORDERCOLOR= цвет бордюра • BORDERCOLORLIGHT= задают цвет светлой сторон рамки • BORDERCOLORDARK= задают цвет, соответственно, темной сторон рамки <TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime" BORDERCOLORDARK="green"> <TR> <TD> Это уже таблица! </TD> </TR> </TABLE> 24 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Объединение ячеек • COLSPAN= для объединения соседних столбцов • ROWSPAN= для объединения соседних строк" src="https://present5.com/presentation/-69424153_342381267/image-25.jpg" alt="Объединение ячеек • COLSPAN= для объединения соседних столбцов • ROWSPAN= для объединения соседних строк" /> Объединение ячеек • COLSPAN= для объединения соседних столбцов • ROWSPAN= для объединения соседних строк <TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF"> 25 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="<TR> <TD WIDTH="33%">Этo первая ячейка</ТD> <TD WIDTH="33%">Это вторая ячейка</ТD> <TD ROWSPAN="3">A это три ячейки" src="https://present5.com/presentation/-69424153_342381267/image-26.jpg" alt="<TR> <TD WIDTH="33%">Этo первая ячейка</ТD> <TD WIDTH="33%">Это вторая ячейка</ТD> <TD ROWSPAN="3">A это три ячейки" /> <TR> <TD WIDTH="33%">Этo первая ячейка</ТD> <TD WIDTH="33%">Это вторая ячейка</ТD> <TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую ячейку</ТD> </TR> 26 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="<TR> <TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD> </TR> 27 " src="https://present5.com/presentation/-69424153_342381267/image-27.jpg" alt="<TR> <TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD> </TR> 27 " /> <TR> <TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD> </TR> 27 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="<TR> <TD>Это первая ячейка третьей строки </ТD> <TD>A это вторая ячейка третьей строки </ТD>" src="https://present5.com/presentation/-69424153_342381267/image-28.jpg" alt="<TR> <TD>Это первая ячейка третьей строки </ТD> <TD>A это вторая ячейка третьей строки </ТD>" /> <TR> <TD>Это первая ячейка третьей строки </ТD> <TD>A это вторая ячейка третьей строки </ТD> </TR> </TABLE> 28 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Вид таблицы 29 " src="https://present5.com/presentation/-69424153_342381267/image-29.jpg" alt="Вид таблицы 29 " /> Вид таблицы 29 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Элементы таблицы • <TBODY> - основное содержание таблицы обозначить тегом. • <THEAD> - заголовок" src="https://present5.com/presentation/-69424153_342381267/image-30.jpg" alt="Элементы таблицы • <TBODY> - основное содержание таблицы обозначить тегом. • <THEAD> - заголовок" /> Элементы таблицы • <TBODY> - основное содержание таблицы обозначить тегом. • <THEAD> - заголовок таблицы • <TFOOT> - заключение 30 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Графика на веб-странице Фоновое изображение атрибут BACKGROUND= <BODY BACKGROUND="Images/back 1. jpg"> Файл рисунка 31" src="https://present5.com/presentation/-69424153_342381267/image-31.jpg" alt="Графика на веб-странице Фоновое изображение атрибут BACKGROUND= <BODY BACKGROUND="Images/back 1. jpg"> Файл рисунка 31" /> Графика на веб-странице Фоновое изображение атрибут BACKGROUND= <BODY BACKGROUND="Images/back 1. jpg"> Файл рисунка 31 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Графические иллюстрации • тег <IMG> атрибуты WIDTH= HEIGHT= <IMG SRC="Images/clavi. gif"> 32 " src="https://present5.com/presentation/-69424153_342381267/image-32.jpg" alt="Графические иллюстрации • тег <IMG> атрибуты WIDTH= HEIGHT= <IMG SRC="Images/clavi. gif"> 32 " /> Графические иллюстрации • тег <IMG> атрибуты WIDTH= HEIGHT= <IMG SRC="Images/clavi. gif"> 32 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Размеры картинки атрибуты WIDTH = - ШИРИНА HEIGHT = - ВЫСОТА <IMG SRC="Images/clavi. gif"" src="https://present5.com/presentation/-69424153_342381267/image-33.jpg" alt="Размеры картинки атрибуты WIDTH = - ШИРИНА HEIGHT = - ВЫСОТА <IMG SRC="Images/clavi. gif"" /> Размеры картинки атрибуты WIDTH = - ШИРИНА HEIGHT = - ВЫСОТА <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200"> 33 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="атрибут ALT= - просмотр графики <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова"> Выравнивание изображения по" src="https://present5.com/presentation/-69424153_342381267/image-34.jpg" alt="атрибут ALT= - просмотр графики <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова"> Выравнивание изображения по" /> атрибут ALT= - просмотр графики <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова"> Выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство textalign со значением center. При этом тег <img> должен располагаться внутри абзаца (тег <p>). 34 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="атрибут BORDER= - рамка вокруг рисунка <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0"> 35" src="https://present5.com/presentation/-69424153_342381267/image-35.jpg" alt="атрибут BORDER= - рамка вокруг рисунка <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0"> 35" /> атрибут BORDER= - рамка вокруг рисунка <IMG SRC="Images/clavi. gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0"> 35 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="атрибут ALIGN= выравнивание • ALIGN="left" — текст обтекает рисунок, который располагается слева; • ALIGN="right"" src="https://present5.com/presentation/-69424153_342381267/image-36.jpg" alt="атрибут ALIGN= выравнивание • ALIGN="left" — текст обтекает рисунок, который располагается слева; • ALIGN="right"" /> атрибут ALIGN= выравнивание • ALIGN="left" — текст обтекает рисунок, который располагается слева; • ALIGN="right" — текст обтекает рисунок, который располагается справа; • ALIGN="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста (можно также применять значение "texttop"); • ALIGN="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка (можно также при менять значение "absmiddle"); • ALIGN="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста 36 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Изображение-карта Возможно установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется" src="https://present5.com/presentation/-69424153_342381267/image-37.jpg" alt="Изображение-карта Возможно установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется" /> Изображение-карта Возможно установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется картой графических ссылок (imagemap). 37 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Схема выполнения: 1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>:" src="https://present5.com/presentation/-69424153_342381267/image-38.jpg" alt="Схема выполнения: 1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>:" /> Схема выполнения: 1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>: <IMG SRC="Images/computer. gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI 800"> 2. Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предварительным знаком #, Если карта еще не создана, как в нашем случае, то ей можно дать любое имя: <IMG SRC="Images/computer. gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap"> 38 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="3. Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где" src="https://present5.com/presentation/-69424153_342381267/image-39.jpg" alt="3. Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где" /> 3. Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где угодно, хоть в другом файле — тогда в атрибуте USEMAP= нужно будет указать, кроме имени карты, имя этого файла, например: “mapfile. html#mymap”). В нашем случае давайте рас положим ее в конце того же файла. 4. Карта графических ссылок начинается с тега < МАР> и завершается зак рывающим тегом </МАР>. В теге <МАР> следует установить (обязательно!) единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге <МАР> (с помощью атрибута USEMAP=). В данном случае это должно быть имя "compmap": <МАР NAME="compmap"> 39 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="5. Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из" src="https://present5.com/presentation/-69424153_342381267/image-40.jpg" alt="5. Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из" /> 5. Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из нескольких тегов <AREA> , каждый из которых определяет активную область рисунка. 6. “Активные области” могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге <AREA> (он употребляется без закрывающего тега). Если значение этого атрибута — "rect", область будет прямоугольной, если "circle" — круглой, а если "poly" — многоугольной. 7. Определить координаты каждой из активных областей и записать их как значения атрибута COORDS=. 40 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="8. В теге <AREA> необходимо установить еще самое главное — атрибут HREF=, определяющий гиперссылку," src="https://present5.com/presentation/-69424153_342381267/image-41.jpg" alt="8. В теге <AREA> необходимо установить еще самое главное — атрибут HREF=, определяющий гиперссылку," /> 8. В теге <AREA> необходимо установить еще самое главное — атрибут HREF=, определяющий гиперссылку, то есть куда же должен попасть пользователь при щелчке мышью на этой “активной области”. 9. Определить также атрибут ALT=. 41 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Система координат 120, 0 х 0, 100 120, 100 у 42 " src="https://present5.com/presentation/-69424153_342381267/image-42.jpg" alt="Система координат 120, 0 х 0, 100 120, 100 у 42 " /> Система координат 120, 0 х 0, 100 120, 100 у 42 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Оформление кнопок <BUTTON> • <BUTTON>ЭТO KHОПKА</BUTTON> - стандартная кнопка • < BUTTON > <img" src="https://present5.com/presentation/-69424153_342381267/image-43.jpg" alt="Оформление кнопок <BUTTON> • <BUTTON>ЭТO KHОПKА</BUTTON> - стандартная кнопка • < BUTTON > <img" /> Оформление кнопок <BUTTON> • <BUTTON>ЭТO KHОПKА</BUTTON> - стандартная кнопка • < BUTTON > <img SRC="Images/bl. gif" BORDER="0" WIDTH="26" HEIGHT="23" ALT=""> </BUTTON> - кнопка-картинка 43 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Оформление веб-страницы с использованием стилей Каскадные таблицы стилей (CSS) 1. Самый примитивный способ использования" src="https://present5.com/presentation/-69424153_342381267/image-44.jpg" alt="Оформление веб-страницы с использованием стилей Каскадные таблицы стилей (CSS) 1. Самый примитивный способ использования" /> Оформление веб-страницы с использованием стилей Каскадные таблицы стилей (CSS) 1. Самый примитивный способ использования CSS — это ввести в код HTML атрибут STYLE= с соответствующим значением. Его можно добавить практически ко всем тегам (кроме <HEAD> и <HTML> ). 2. В таблице стилей кода HTML 3. Создание отдельного файла с расширением . CSS 44 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="1. Использование атрибута STYLE= • <Н 1 STYLE="text-align: center; ">Домашняя страница </Н 1> или" src="https://present5.com/presentation/-69424153_342381267/image-45.jpg" alt="1. Использование атрибута STYLE= • <Н 1 STYLE="text-align: center; ">Домашняя страница </Н 1> или" /> 1. Использование атрибута STYLE= • <Н 1 STYLE="text-align: center; ">Домашняя страница </Н 1> или <Н 1 ALIGN="center">Домашняя страница </Н 1> • <DIV STYLE="font-size: larger; "> 45 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="2. Определение стилей в специальной таблице <STYLE> и </STYLE> <STYLE> BODY { background-color: #ВАВААО;" src="https://present5.com/presentation/-69424153_342381267/image-46.jpg" alt="2. Определение стилей в специальной таблице <STYLE> и </STYLE> <STYLE> BODY { background-color: #ВАВААО;" /> 2. Определение стилей в специальной таблице <STYLE> и </STYLE> <STYLE> BODY { background-color: #ВАВААО; color: red); } </STYLE> Н 1, Н 2 { text-align: center; } 46 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="3. Внешние стилевые таблицы <LINK REL="Stylesheet" HREF="mainstyle. css" TYPE="text/css"> - подключение таблицы стилей 47" src="https://present5.com/presentation/-69424153_342381267/image-47.jpg" alt="3. Внешние стилевые таблицы <LINK REL="Stylesheet" HREF="mainstyle. css" TYPE="text/css"> - подключение таблицы стилей 47" /> 3. Внешние стилевые таблицы <LINK REL="Stylesheet" HREF="mainstyle. css" TYPE="text/css"> - подключение таблицы стилей 47 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" /> </p> </div> </div> <div id="inputform"> <script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php"); </script> </div> </p> <!--end entry-content--> </div> </article><!-- .post --> </section><!-- #content --> <div class="three columns"> <div class="widget-entry"> <div id="sidebarrelated"> <div id="text-2" class="box_small box widget widget_text"><div class="crp_related crp_related_shortcode "><div class="gallery_entry_related"><a href="https://present5.com/prezentaciya-prez-manag-stud-22/" ><img src="https://present5.com/wp-content/uploads/prez_manag_stud_22-180x135.jpg" alt="Презентация prez manag stud 22" title="Презентация prez manag stud 22" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/prezentaciya-prez-manag-stud-22/" class="crp_title">Презентация prez manag stud 22</a></div><div class="gallery_entry_related"><a href="https://present5.com/platforma-java-2014-1-st-pr-ovchinnikov-a/" ><img src="https://present5.com/wp-content/uploads/java_lections_0-180x135.jpg" alt="Платформа Java 2014 1 ст. пр. Овчинников А." title="Платформа Java 2014 1 ст. пр. Овчинников А." width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/platforma-java-2014-1-st-pr-ovchinnikov-a/" class="crp_title">Платформа Java 2014 1 ст. пр. Овчинников А.</a></div><div class="gallery_entry_related"><a href="https://present5.com/prezentaciya-presentation-poroshk-met-giya-766-slajdov/" ><img src="https://present5.com/wp-content/uploads/presentation_poroshk_met-giya_766_slaydov-180x135.jpg" alt="Презентация presentation Порошк мет-гия 766 слайдов" title="Презентация presentation Порошк мет-гия 766 слайдов" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/prezentaciya-presentation-poroshk-met-giya-766-slajdov/" class="crp_title">Презентация presentation Порошк мет-гия 766 слайдов</a></div><div class="gallery_entry_related"><a href="https://present5.com/upravlenie-po-rezultatam-kalgin-aleksandr-sergeevich-ph-d/" ><img src="https://present5.com/wp-content/uploads/upravlenie_po_rezulytatam_-_kalgin_v.9_-_udlinennaya__pologhitelynye_effekty_0-180x135.jpg" alt="Управление по результатам Калгин Александр Сергеевич Ph. D" title="Управление по результатам Калгин Александр Сергеевич Ph. D" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/upravlenie-po-rezultatam-kalgin-aleksandr-sergeevich-ph-d/" class="crp_title">Управление по результатам Калгин Александр Сергеевич Ph. D</a></div><div class="gallery_entry_related"><a href="https://present5.com/prezentaciya-agit-dizajn-v-sssr-1/" ><img src="https://present5.com/wp-content/uploads/agit-dizayn_v_sssr_1-180x135.jpg" alt="Презентация АГИТ-ДИЗАЙН В СССР 1" title="Презентация АГИТ-ДИЗАЙН В СССР 1" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/prezentaciya-agit-dizajn-v-sssr-1/" class="crp_title">Презентация АГИТ-ДИЗАЙН В СССР 1</a></div><div class="gallery_entry_related"><a href="https://present5.com/instagram-rukovodstvo-lidera-oriflejm-modul-3-vneshnie/" ><img src="https://present5.com/wp-content/uploads/instagram_-_rukovodstvo_lidera_orifleym_0-180x101.jpg" alt="Instagram Руководство Лидера Орифлэйм Модуль № 3 Внешние" title="Instagram Руководство Лидера Орифлэйм Модуль № 3 Внешние" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/instagram-rukovodstvo-lidera-oriflejm-modul-3-vneshnie/" class="crp_title">Instagram Руководство Лидера Орифлэйм Модуль № 3 Внешние</a></div><div class="gallery_entry_related"><a href="https://present5.com/uprazhnenie-1-dizajn-ploskosti-osnovaniya-plansheta-uprazhnenie-2/" ><img src="https://present5.com/wp-content/uploads/upr_3-4-5_0-180x135.jpg" alt="Упражнение 1: Дизайн плоскости основания (планшета) Упражнение 2:" title="Упражнение 1: Дизайн плоскости основания (планшета) Упражнение 2:" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/uprazhnenie-1-dizajn-ploskosti-osnovaniya-plansheta-uprazhnenie-2/" class="crp_title">Упражнение 1: Дизайн плоскости основания (планшета) Упражнение 2:</a></div><div class="gallery_entry_related"><a href="https://present5.com/ki%d1%97vskij-nacionalnij-universitet-imeni-tarasa-shevchenka-13-stisnennya/" ><img src="https://present5.com/wp-content/uploads/i-13-15-2013-171x135.jpg" alt="Київський національний університет імені Тараса Шевченка 13. Стиснення" title="Київський національний університет імені Тараса Шевченка 13. Стиснення" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/ki%d1%97vskij-nacionalnij-universitet-imeni-tarasa-shevchenka-13-stisnennya/" class="crp_title">Київський національний університет імені Тараса Шевченка 13. Стиснення</a></div><div class="crp_clear"></div></div></div></div> </div> </div> </div> </div> <!-- #content-wrapper --> <footer id="footer"> <div class="container"> <div class="columns twelve"> <!--noindex--> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='"+" ' "+ "border='0' width='1' height='1'><\/a>") //--></script><!--/LiveInternet--> <script> $(window).load(function() { var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0]; document.getElementById("owlheader").insertBefore(owl, null); $('#owlheader').css('display', 'inline-block'); }); </script> <script type="text/javascript"> var yaParams = {'typepage': 'parserexe3', 'author': 'parserexe3' }; </script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32395810 = new Ya.Metrika({ id:32395810, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, params: yaParams }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!--/noindex--> <nav id="top-nav"> <ul id="menu-top" class="top-menu clearfix"> </ul> </nav> </div> </div><!--.container--> </footer> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.16'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.1'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.16'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script> <![endif]--> </body> </html>