Web- страницы. Язык HTML и др.
-
Upload
phelan-cortez -
Category
Documents
-
view
63 -
download
3
description
Transcript of Web- страницы. Язык HTML и др.
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
1. Введение2. Структура документа3. Списки4. Гиперссылки5. Оформление документа
6. Рисунки7. Таблицы8. Фреймы9. Блоки (DIV)10.Понятие о JavaScript
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 1. Введение
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
3
Что такое Web-страницы?Гиперссылка – «активная»ссылка на другой
документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
4
Какие бывают Web-страницы?• статические – существуют на сервере в виде готовых файлов: *.htm, *.html
• динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php
• позволяют выбирать информацию из базы данных по заранее неизвестным запросам
• дополнительная нагрузка на сервер• загружаются медленнее
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
5
Язык HTMLHTML = Hypertext Markup Language
(язык разметки гипертекста)
HTML – это не язык программирования!!HTML-страница – это текстовый файл (Блокнот):
<HTML><HEAD><TITLE>Моя страница</TITLE></HEAD><BODY>Привет!…</BODY></HTML>
<HTML><HEAD><TITLE>Моя страница</TITLE></HEAD><BODY>Привет!…</BODY></HTML>
index.html
sail.jpg man.jpg sunset.jpg
clock.avi ball.swfbee.wav
images
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
6
ТэгиТэг – это команда языка HTML, которую выполняет
браузер:• непарные тэги
• парные тэги (контейнеры)
<IMG SRC = "vasya.jpg"><IMG SRC = "vasya.jpg">
вставить рисунок вставить рисунок
<TABLE>...</TABLE>
<TABLE>...</TABLE>
открывающий открывающий
закрывающий закрывающий
область действия тэга: описание
таблицы
область действия тэга: описание
таблицы
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
7
Простейшая Web-страница
<HTML>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
first.html
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
шапка («голова») шапка («голова»)
<BODY>
Привет!
</BODY>
<BODY>
Привет!
</BODY>
основная часть («тело»)
основная часть («тело»)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
8
Редактор HEFS
файловые операции файловые операции
буфер обмена буфер обмена
один экран один
экран
запускбраузера (F9)
запускбраузера (F9) назадназад вперед вперед
текстовый редактор текстовый редактор
браузер (IE)браузер (IE)
отмена отмена
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
9
Вставка тэгов в HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 2. Структура документа.Специальные символы
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
11
Заголовки: H1 … H6
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
выравнивание:
<H1 ALIGN=center>История</H1><H1 ALIGN=center>История</H1>
left, center,
right
left, center,
right
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
12
Абзацы
• переход на новую строку
• абзац (с отступами)
И вечный бой! Покой нам только снится<BR>Сквозь кровь и пыль...<BR>Летит, летит степная кобылица<BR>И мнет ковыль...
И вечный бой! Покой нам только снится<BR>Сквозь кровь и пыль...<BR>Летит, летит степная кобылица<BR>И мнет ковыль...
<P>Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.</P><P>До самого вечера тело с варежками ...</P>
<P>Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.</P><P>До самого вечера тело с варежками ...</P>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
13
Выравнивание
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине. </P>
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине. </P>
left по левой границеright по правой границеcenter по центруjustify по ширине
Не используйте выравнивание по ширине для узких столбцов!
!
атрибут тэга <P> атрибут тэга <P>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
14
Абзацы в HEFS
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
15
Специальные символы Символ HTML-код Название
– — (длинное) тире
неразрывный пробел
§ § параграф
© © символ авторского права
« « левая русская кавычка
» » правая русская кавычка
® ® зарегистрированная торговая марка
° ° градус
² ² квадрат
³ ³ куб
¼ ¼ четверть
½ ½ половина
¾ ¾ три четверти
× × знак умножения
÷ ÷ знак деления
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
16
Специальные символы
А.С. Пушкин — солнце русской поэзии.
Дом сдали в 2011 году.
Пёс весил 12 кг.
Из дома вышел А.С. Пушкин – солнце русской поэзии.
Из дома вышел А.С. Пушкин – солнце русской поэзии.
Вышел А.С. Пушкин – солнце русской поэзии.
Вышел А.С. Пушкин – солнце русской поэзии.
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
17
Специальные символы в HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 3. Списки
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
19
Маркированные списки
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
unordered list (неупорядоченный
список)
unordered list (неупорядоченный
список) list item (элемент списка)
list item (элемент списка)
изменение маркера:
<UL TYPE="disk">...</UL>
<UL TYPE="disk">...</UL>
disk circle ○square ■
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
20
Нумерованные списки
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
ordered list (упорядоченный
список)
ordered list (упорядоченный
список)
изменение нумерации:
<OL TYPE=i START=3>...</OL>
<OL TYPE=i START=3>...</OL>
1, i, I, a, A1, i, I, a, A
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
21
Списки определений
<DL>
<DT>компьютер
<DD>устройство для обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный диск
</DL>
<DL>
<DT>компьютер
<DD>устройство для обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный диск
</DL>
definition list (список определений) definition list (список определений)
definition term (термин)
definition term (термин)
definition description (описание)
definition description (описание)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
22
Многоуровневые списки
<UL><LI>Города России
<LI>Города Украины
</UL>
<UL><LI>Города России
<LI>Города Украины
</UL>
<OL> <LI>Москва <LI>Санкт-Петерург</OL>
<OL> <LI>Москва <LI>Санкт-Петерург</OL>
<OL> <LI>Киев <LI>Одесса</OL>
<OL> <LI>Киев <LI>Одесса</OL>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
23
Списки в HEFS
Ctrl-L вставить элемент списка <LI>
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 4. Гиперссылки
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
25
Ссылки на другие страницы сайта
<A HREF="table.htm">Таблицы</A><A HREF="table.htm">Таблицы</A>
• страница в той же папке
anchor (якорь) anchor (якорь)
hyper reference (гиперссылка)
hyper reference (гиперссылка)
• страница во вложенной папке
<A HREF="example/ex1.htm">Пример</A><A HREF="example/ex1.htm">Пример</A>
• страница в соседней папке
<A HREF="../texts/text1.htm">Текст</A><A HREF="../texts/text1.htm">Текст</A>
выйти из текущей папки выйти из текущей папки
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
26
Примеры (ссылки из файла rock.html)
story.html
stories–
novels–
new–
old–
list.html
sea.html
verse.html
rock.htmlrock.html
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
27
Ссылки на другие сайты
<A HREF="http://www.mail.ru">Почта</A><A HREF="http://www.mail.ru">Почта</A>
• на главную страницу сайта
index.htm, index.html, default.asp, …
• на конкретную страницу сайта (URL)
<A HREF="http://www.vasya.ru/text/a.htm">
Васин текст</A>
<A HREF="http://www.vasya.ru/text/a.htm">
Васин текст</A>
• на файл для скачивания
<A HREF="http://www.vasya.ru/prog.zip">
Скачать</A>
<A HREF="http://www.vasya.ru/prog.zip">
Скачать</A>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
28
Ссылки внутри страницы<A NAME="up"></A>
<A HREF="#chap1">Глава 1</A><br>
<A HREF="#chap2">Глава 2</A><br>
<A NAME="chap1"></A>
<H1>Глава 1</H1>
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.<BR>
<A HREF="#up">Наверх</A>
<A NAME="chap2"></A>
<H1>Глава 2</H1>
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.<BR>
<A HREF="#up">Наверх</A>
<A NAME="up"></A>
<A HREF="#chap1">Глава 1</A><br>
<A HREF="#chap2">Глава 2</A><br>
<A NAME="chap1"></A>
<H1>Глава 1</H1>
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.<BR>
<A HREF="#up">Наверх</A>
<A NAME="chap2"></A>
<H1>Глава 2</H1>
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.<BR>
<A HREF="#up">Наверх</A>
• в другом файле
<A HREF="texts.html#color">Цвет текста</A><A HREF="texts.html#color">Цвет текста</A>
метка (якорь) метка (якорь)
переход на метку переход на метку
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
29
Запуск почтовой программы
<A HREF="mailto:[email protected]">Напишите мне!</A>
<A HREF="mailto:[email protected]">Напишите мне!</A>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
30
Гиперссылки в HEFS
локальная ссылка
локальная ссылка
Автоматически строится относительный адрес!!Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную
вставить только адрес
файла
вставить только адрес
файла
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 5. Оформление документа. Стилевые файлы (CSS)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
32
Содержание и оформление
<H1>Сборник задач по физике</H1><P class=“author”>Григорий Остер</P><H2>Задача 61</H2>Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться?
<H1>Сборник задач по физике</H1><P class=“author”>Григорий Остер</P><H2>Задача 61</H2>Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться?
содержание (контент)
логическая разметка
(*.html)
логическая разметка
(*.html)
оформление
физическая разметка(*.css)
физическая разметка(*.css)
main.c
ss
mini.css
print.css
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
33
Логическая разметка
выделение (emphasize)
Это моя <EM>первая</EM> победа.
сильное выделение (strong)
<STRONG>Вася</STRONG>
код программы <CODE>a:= 2*b</CODE>определение (definition)
<DFN>Сурок</DFN> - это...
цитата (citation) <CITE>Блажен, кто верует, ...</CITE>
сокращение (abbreviation) <ABBR>НИИЧАВО</ABBR>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
34
Форматированный текст (тексты программ)
program qq;var a, b: integer;begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b);end.
program qq;var a, b: integer;begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b);end.
<PRE>program qq;var a, b: integer;begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b);end.
</PRE>
<PRE>program qq;var a, b: integer;begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b);end.
</PRE>
отформатированный текст(preformatted)
отформатированный текст(preformatted)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
35
Физическая разметка
курсив (italic) <I>Вася</I> Вася
жирный (bold) <B>Вася</B> Вася
подчеркивание (underline) <U>Вася</U> Вася
зачеркивание (strike out) <S>Вася</S> Вася
верхний индекс (superscript) Вася<SUP>2</SUP> Вася2
нижний индекс (subscript) Вася<SUB>2</SUB> Вася2
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
36
Форматирование текста в HEFS
Ctrl-BCtrl-B
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
42
Кодирование цвета• имена
red, green, blue, magenta, black, • шестнадцатеричные коды
white
# F A 8 0 7 2# F A 8 0 7 2
RR GG BB
# F F 0 0 0 0# F F 0 0 0 0
# F F F F F F# F F F F F F
# 0 0 F F F F# 0 0 F F F F
# 0 0 0 0 0 0# 0 0 0 0 0 0
# A A A A A A# A A A A A A
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
43
Что такое CSS?• HTML – язык логической разметки текста,
определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)
• HTML–код не должен содержать оформления!
• оформление частей документа (заголовков, параграфов) описывается в отдельном файле
• CSS = Cascading Style Sheets – каскадные таблицы стилей
• стилевые файлы: *.css
HTML + CSSHTML + CSS
оформлениеоформлениесодержаниесодержание
+ Javascript
анимацияанимация
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
44
Свойства элементов страницы
body { color: white; background: #FF6600;}
body { color: white; background: #FF6600;}
название тэганазвание тэгазначениезначение
селектор (свойство
)
селектор (свойство
)
color – цвет символовbackground – цвет фона
my.css
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
45
Подключение стилевого файла
<html><head><title>Пример CSS</title><link rel="stylesheet" href="my.css" type="text/css"></head>
<body>...</body>
</html>
<html><head><title>Пример CSS</title><link rel="stylesheet" href="my.css" type="text/css"></head>
<body>...</body>
</html>
qq.html
my.cssbody { color: white; background: #0000E0;}
body { color: white; background: #0000E0;}
<body><body>......</body></body>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
46
Шрифты
p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold;}
p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold;}
для всех абзацевдля всех абзацев
семейство шрифтов
семейство шрифтов
serif – с засечкамиsans-serif – без засечекmonospace – моноширинный
serif – с засечкамиsans-serif – без засечекmonospace – моноширинный
размер в пикселяхразмер в пикселях
normal – обычный italic - курсивnormal – обычный italic - курсив
normal – обычный bold - жирныйnormal – обычный bold - жирный
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
47
Классы (стили оформления)
p.spec { font-style: italic; background: green;}
p.spec { font-style: italic; background: green;}
для абзацев
класса specдля абзацев
класса spec
<p class="spec">L’Etat c’est moi.</p>
<p class="spec">L’Etat c’est moi.</p>
qq.html
L’Etat c’est moi.L’Etat c’est moi.
.spec { font-style: italic; background: green;}
.spec { font-style: italic; background: green;}
для всех элементов
класса spec
для всех элементов
класса spec
<h1 class="spec">Россия молодая</h1>
<h1 class="spec">Россия молодая</h1>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
48
Размеры, выравнивание
p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; }
p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; }
ширинаширина
высотавысота
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.
выравнивание:left
centerright
justify
выравнивание:left
centerright
justify
100px
80%
20px
фонфон
абзацный отступ
абзацный отступ
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
49
Рамка и поля
p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; }
p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; }
рамкарамка
отступы снаружиотступы снаружи
отступы внутри
отступы внутри сверху,
справа, снизу, слева
сверху, справа, снизу,
слевасо всех сторонсо всех сторон
толщинатолщина
solid – сплошнаяdashed - штриховаяdotted – точечная
solid – сплошнаяdashed - штриховаяdotted – точечная
цветцвет
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.
40px40px
5px20px
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
p.hallo { background: white url(images/grad.jpg);}
p.hallo { background: white url(images/grad.jpg);}
50
Фоновый рисунок
<p class="hallo">Привет, Вася!</p>
<p class="hallo">Привет, Вася!</p>
Привет, Вася!
p.hallo { background: url(grad.jpg) repeat-y;}
p.hallo { background: url(grad.jpg) repeat-y;}
Привет, Вася!
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
51
Фоновый рисунок без повторения
p.email { background: url(letter.gif) no-repeat; padding-left: 20px;}
p.email { background: url(letter.gif) no-repeat; padding-left: 20px;}
<p class="email"><a href="mailto:[email protected]">[email protected]</a></p>
<p class="email"><a href="mailto:[email protected]">[email protected]</a></p>
20px
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
52
Ссылки
p.email a { color: green; text-decoration:none;}
p.email a { color: green; text-decoration:none;}
p.email a:hover { color: #00F; text-decoration:underline; }
p.email a:hover { color: #00F; text-decoration:underline; }
p.email a:visited { color: #F0F;}
p.email a:visited { color: #F0F;}
ссылки внутри абзаца стиля email
ссылки внутри абзаца стиля email
убрать подчеркивание
убрать подчеркивание
посещённые ссылкипосещённые ссылки
подчеркнутьподчеркнуть
когда мышь над ссылкойкогда мышь над ссылкой
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
53
Выделение отдельных слов
.latin { color: green; font-style: italic;}
.latin { color: green; font-style: italic;}
класс, применимый ко всему
класс, применимый ко всему
курсивкурсив
<p>Собака(лат. <span class="latin">Canis lupus familiaris</span>) — одно из наиболее Домашних "животных-компаньонов".</p>
<p>Собака(лат. <span class="latin">Canis lupus familiaris</span>) — одно из наиболее Домашних "животных-компаньонов".</p>
Что хочется исправить?
!
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 6. Рисунки
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
55
Форматы рисунковGIF (Graphic Interchange Format)
• сжатие без потерь• прозрачные области• анимация• только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)• сжатие с потерями• только True Color (16,7 млн. цветов)• нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)• сжатие без потерь• с палитрой (PNG-8) и True Color (PNG-24)• прозрачность и полупрозрачность (альфа-канал)• нет анимации• плохо сжимает мелкие рисунки
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
56
Фон страницы (через CSS)
body { background: url(back.jpg);}
body { background: url(back.jpg);} 'images/back.jpg'
'../images/back.jpg‘'http://www.vasya.ru/images/back.jpg'
'images/back.jpg''../images/back.jpg‘'http://www.vasya.ru/images/back.jpg'
Не должно быть «швов»!! Фон не должен мешать!
!
#6e5c62;
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
57
Рисунки в документе
<IMG SRC="flag.jpg"> <IMG SRC="flag.jpg">
<IMG SRC="images/flag.jpg"> <IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg"> <IMG SRC="../images/flag.jpg">
<IMG SRC="http://www.vasya.ru/img/flag.jpg"> <IMG SRC="http://www.vasya.ru/img/flag.jpg">
из той же папки:
из другой папки:
с другого сервера:
image(изображение
)
image(изображение
)
source(источник)
source(источник)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
58
Выравнивание
<IMG SRC="flag.jpg" ALIGN="left"> <IMG SRC="flag.jpg" ALIGN="left">
left right
top bottom(по умолчанию) middle
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
59
Отступы
<IMG SRC="net.jpg" ALIGN="left"> <IMG SRC="net.jpg" ALIGN="left">
<IMG SRC="net.jpg" ALIGN="left" HSPACE=10 VSPACE=10>
<IMG SRC="net.jpg" ALIGN="left" HSPACE=10 VSPACE=10>
VSPACE(vertical space)
HSPACE(horizontal space)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
60
Выравнивание и отступы (CSS)
<img src="net.jpg" class="left"> <img src="net.jpg" class="left">
img.left { float: left; margin: 5px 10px;}
img.left { float: left; margin: 5px 10px;}
= VSPACE= VSPACE
= HSPACE= HSPACE
= ALIGN= ALIGN
margin: 5px 10px 5px 0;margin: 5px 10px 5px 0;
отступа слева нет!отступа слева нет!
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
61
Другие атрибуты
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
WIDTH=100 HEIGHT=150
BORDER=0>
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
WIDTH=100 HEIGHT=150
BORDER=0>
• всплывающая подсказка
• надпись на месте рисунка, если его нет
• всплывающая подсказка
• надпись на месте рисунка, если его нет
размеры позволяют:• растянуть - сжать• не портить дизайн,
если рисунка нет
размеры позволяют:• растянуть - сжать• не портить дизайн,
если рисунка нет
толщина рамки вокруг рисункатолщина рамки вокруг рисунка
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
62
Рисунок-гиперссылка
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка вокруг
иначе будет синяя рамка вокруг
если </A> не вплотную к <IMG …>, будет «хвост»если </A> не вплотную к <IMG …>, будет «хвост»
не будет «хвоста»не будет «хвоста»
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
63
Рисунки в HEFS
вставить рисуноквставить рисунок
Автоматически вставляются размеры!
!
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 7. Таблицы
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
65
Простейшая таблица
<TABLE BORDER="1"><TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD></TR></TABLE>
<TABLE BORDER="1"><TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD></TR></TABLE>
толщина рамкитолщина рамки
TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
66
Размеры
<TABLE WIDTH="60%" HEIGHT="300">...</TABLE>
<TABLE WIDTH="60%" HEIGHT="300">...</TABLE>
ширина в пикселях или в % от
ширины окна браузера
ширина в пикселях или в % от
ширины окна браузера
высота в пикселяхвысота в пикселях
<TR HEIGHT="50">...</TR>
<TR HEIGHT="50">...</TR>
всей таблицы:
строки:
ячейки:
<TD WIDTH="25%" HEIGHT="50">...</TD>
<TD WIDTH="25%" HEIGHT="50">...</TD>
ширина в пикселях или в % от ширины
таблицы
ширина в пикселях или в % от ширины
таблицы
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
67
Размеры (через CSS)
table.spec { width: 60%; height: 300;}
table.spec { width: 60%; height: 300;}
table.spec tr { height: 50px;}
table.spec tr { height: 50px;}
всей таблицы:
строки:
ячейки:table.spec td.qq { width: 25%; height: 50px;}
table.spec td.qq { width: 25%; height: 50px;}
<table class="spec">...</table>
<table class="spec">...</table>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
68
Выравнивание
<TABLE BORDER="1"><TR ALIGN="center" VALIGN="top"> <TD WIDTH=120 HEIGHT=100>По центру, по верхней границе</TD> <TD ALIGN="right" VALIGN="middle"
WIDTH=200>По правой границе, по середине</TD></TR></TABLE>
<TABLE BORDER="1"><TR ALIGN="center" VALIGN="top"> <TD WIDTH=120 HEIGHT=100>По центру, по верхней границе</TD> <TD ALIGN="right" VALIGN="middle"
WIDTH=200>По правой границе, по середине</TD></TR></TABLE>
<TABLE ALIGN="center">...</TABLE>
<TABLE ALIGN="center">...</TABLE>
всей таблицы:
информации в ячейках:
left,center,
right
left,center,
right
left,center,
right
left,center,
righttop,
middle,bottom
top,middle,bottom
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
69
Выравнивание (через CSS)<table class="ex" border="1"><tr class="centop"> <td>По центру, по верхней границе</td> <td class="rmid">По правой
границе, по середине</td></tr></table>
<table class="ex" border="1"><tr class="centop"> <td>По центру, по верхней границе</td> <td class="rmid">По правой
границе, по середине</td></tr></table> table.ex tr.centop {
text-align: center; vertical-align: top; height:100px;}table.ex td.rmid { text-align: right; vertical-align: middle; width:200px;}
table.ex tr.centop { text-align: center; vertical-align: top; height:100px;}table.ex td.rmid { text-align: right; vertical-align: middle; width:200px;}
left,center,
right
left,center,
right
top,middle,bottom
top,middle,bottom
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
70
Фон и цвет текста
<TABLE BORDER="1" BGCOLOR="green"><TR HEIGHT=30 BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD></TR><TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD></TR></TABLE>
<TABLE BORDER="1" BGCOLOR="green"><TR HEIGHT=30 BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD></TR><TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD></TR></TABLE>
цвет фонацвет фона
фоновый рисунокфоновый рисунок
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
71
Фон и цвет текста (CSS)<table border="1" class="qq"><tr class="spec"> <td>Привет!</td> <td class="r"></td></tr><tr> <td class="pic"> Таблица из двух строк</td> <td>и двух столбцов</td></tr></table>
<table border="1" class="qq"><tr class="spec"> <td>Привет!</td> <td class="r"></td></tr><tr> <td class="pic"> Таблица из двух строк</td> <td>и двух столбцов</td></tr></table>
table.qq td { background: green;}table.qq tr.spec td { background: blue; color: white;}table.qq tr.spec td.r { background: red;}table.qq td.pic { background: url("web.jpg");}
table.qq td { background: green;}table.qq tr.spec td { background: blue; color: white;}table.qq tr.spec td.r { background: red;}table.qq td.pic { background: url("web.jpg");}
цвет фонацвет фона
рисунокрисунок
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
72
Отступы
<TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue><TR BGCOLOR = white> <TD WIDTH = 100>1</TD> <TD WIDTH = 100>2</TD></TR></TABLE>
<TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue><TR BGCOLOR = white> <TD WIDTH = 100>1</TD> <TD WIDTH = 100>2</TD></TR></TABLE>
интервал между ячейками
интервал между ячейками
отступ внутри ячеек
отступ внутри ячеек
CELLSPACING
CELLSPACINGCELLPADDING
CELLPADDING
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
73
Отступы (CSS)<table id="qq"><tr> <td> 1 </td> <td> 2 </td></tr></table>
<table id="qq"><tr> <td> 1 </td> <td> 2 </td></tr></table>
border-spacing
border-spacingpadding
padding
table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px;}#qq tr { background: white;}
table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px;}#qq tr { background: white;}
кроме IE 6кроме IE 6
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
74
Объединение ячеек
<TABLE BORDER="1"><TR> <TD COLSPAN="3">Привет!</TD></TR><TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD></TR></TABLE>
<TABLE BORDER="1"><TR> <TD COLSPAN="3">Привет!</TD></TR><TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD></TR></TABLE>
<TABLE BORDER="1"><TR> <TD ROWSPAN="3">Привет!</TD> <TD>Вася,</TD></TR><TR><TD>Петя,</TD></TR><TR><TD>Маша!</TD></TR></TABLE>
<TABLE BORDER="1"><TR> <TD ROWSPAN="3">Привет!</TD> <TD>Вася,</TD></TR><TR><TD>Петя,</TD></TR><TR><TD>Маша!</TD></TR></TABLE>
column span охват столбцов
column span охват столбцов
row span охват строк
row span охват строк
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
75
Вложенные таблицы
<TABLE BORDER="0" CELLSPACING=10><TR><TD>
</TD><TD>
</TD></TR></TABLE>
<TABLE BORDER="0" CELLSPACING=10><TR><TD>
</TD><TD>
</TD></TR></TABLE>
<TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR></TABLE>
<TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR></TABLE>
<TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR></TABLE>
<TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR></TABLE>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
76
Таблицы в HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 8. Фреймы
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
78
ФреймыФрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.
3 файла:
left.html – страница в левой части
right.html – страница в правой части
index.html – описание структуры
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
79
Описание структурыindex.html
<HTML><HEAD> <TITLE>Фреймы-столбцы</TITLE></HEAD><FRAMESET COLS="30%,*"> <FRAME SRC="left.html"> <FRAME SRC="right.html" NAME="qq"></FRAMESET></HTML>
<HTML><HEAD> <TITLE>Фреймы-столбцы</TITLE></HEAD><FRAMESET COLS="30%,*"> <FRAME SRC="left.html"> <FRAME SRC="right.html" NAME="qq"></FRAMESET></HTML>
<BODY>...</BODY>
<BODY>...</BODY>
columnsстолбцыcolumnsстолбцы
ширина в пикселях или %
ширина в пикселях или %
все остальное место
все остальное место
sourceисточникsource
источникимя фрейма (для ссылок)имя фрейма (для ссылок)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
80
Граница между фреймами
<FRAMESET COLS="30%,*" FRAMESPACING="10">...</FRAMESET>
<FRAMESET COLS="30%,*" FRAMESPACING="10">...</FRAMESET>
<FRAMESET COLS="30%,*" FRAMEBORDER="0">...</FRAMESET>
<FRAMESET COLS="30%,*" FRAMEBORDER="0">...</FRAMESET>
граница между фреймами:0 – невидима, 1 - видима
граница между фреймами:0 – невидима, 1 - видима
ширина полосы между фреймами, за которую
можно перетащить границу
ширина полосы между фреймами, за которую
можно перетащить границу
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
81
Настройка фрейма (FRAME)
<FRAME SRC="a.htm"
MARGINWIDTH="0"
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
<FRAME SRC="a.htm"
MARGINWIDTH="0"
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
убрать отступы от края фрейма до содержимого
убрать отступы от края фрейма до содержимого
полоса прокрутки: auto – появляется, когда
надо yes – есть всегда no – нет никогда
полоса прокрутки: auto – появляется, когда
надо yes – есть всегда no – нет никогда
запретить изменение размеров
запретить изменение размеров
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
82
Фреймы-строкиindex.html
<HTML><HEAD> <TITLE>Фреймы-строки</TITLE></HEAD><FRAMESET ROWS="120,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html" NAME="qq"></FRAMESET></HTML>
<HTML><HEAD> <TITLE>Фреймы-строки</TITLE></HEAD><FRAMESET ROWS="120,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html" NAME="qq"></FRAMESET></HTML>
строкистрокиширина в
пикселях или %ширина в
пикселях или %
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
83
Сложные структуры (3 фрейма)index.html
<FRAMESET COLS="30%,*"> <FRAME SRC="left.html">
</FRAMESET>
<FRAMESET COLS="30%,*"> <FRAME SRC="left.html">
</FRAMESET>
<FRAMESET ROWS="40,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html"></FRAMESET>
<FRAMESET ROWS="40,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html"></FRAMESET>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
84
Как открыть ссылку в другом фрейме
<FRAME ... NAME="qq"><FRAME ... NAME="qq">
<A HREF="chapter2.htm" TARGET="qq">Глава 2</A><A HREF="chapter2.htm" TARGET="qq">Глава 2</A>
TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
85
Фреймы в HEFS
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
86
Работа с несколькими страницами
переключение страниц
переключение страниц
закрыть текущую страницу (Ctrl-W)закрыть текущую страницу (Ctrl-W)
просмотр активной страницы
просмотр активной страницы
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 9. Блоки (DIV)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
88
Блоки (DIV) – любое содержимое<div id="mix"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. </p> <img src="vasya.jpg"> <table> <tr><td>1</td></td></tr> </table></div>
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
89
Блоки (DIV) – рамки и отступы
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar.
padding
border
margin
#qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px;}
#qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px;}
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
90
«Плавающие» блоки
.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold;}
.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold;}
<div class="picture"> <img src="dog.jpg"> <p>На природе</p></div>
<div class="picture"> <img src="dog.jpg"> <p>На природе</p></div>
свойства блока
свойства блока
свойства абзаца внутри блока
свойства абзаца внутри блока
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Web-страницы.Язык HTML и др.
Тема 10. Понятие о Javascript
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
92
Что может Javascript?
• информация статична• нет интерактивности (только переход на
другую страницу)
Чем плоха HTML-страница?
Что можно сделать с помощью Javascript?• изменение рисунка при наведении мыши• выпадающие меню• всплывающие подсказки• фотогалерея без перегрузки страницы• движение объекта по экрану
• Javascript может быть отключен в браузере
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
93
Основные принципы
• каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства
• свойства объекта можно менять из программы на Javascript (скрипта)
• все, что происходит – это события
• все события можно «обрабатывать», т.е. как-то реагировать на них
Javascript – это язык программирования!!HTML + Javascript = DHTML (Dynamic HTML)
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
94
Замена рисунка при движении мыши
<IMG SRC="image1.gif" onMouseOver="this.src='image2.gif'" onMouseOut="this.src='image1.gif'">
<IMG SRC="image1.gif" onMouseOver="this.src='image2.gif'" onMouseOut="this.src='image1.gif'">
когда курсор мыши над рисунком
когда курсор мыши над рисунком
после ухода мыши
после ухода мыши
События: onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта
начальный рисунок
начальный рисунок
this – этот объект this.src – свойство SRC этого объекта
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
95
Скрытый блок
<div id="details" class="hidden">Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.</div>
<div id="details" class="hidden">Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.</div>
.hidden { display:none;}
.hidden { display:none;}
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
96
Скрытый блок: оформление ссылки
<a href="#" onClick="show('details');return false;">Показать детали</a>
<a href="#" onClick="show('details');return false;">Показать детали</a>
остаться на
странице
остаться на
странице
по щелчку вызвать функцию show
по щелчку вызвать функцию show
переход не выполнятьпереход не выполнять
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Скрытый блок: как его открыть?97
function show ( name ){ var elem = document.getElementById(name); if ( elem ) elem.style.display = "block";}
function show ( name ){ var elem = document.getElementById(name); if ( elem ) elem.style.display = "block";}
<head> <script type="text/javascript" src="test.js"> </script></head>
<head> <script type="text/javascript" src="test.js"> </script></head>
test.js
найти блок по имени
найти блок по имени
изменить свойство display
изменить свойство display
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Формы98
<form name="calc"> <input name="answer"> <input type="button" value="Готово" onClick="check();"></form>
<form name="calc"> <input name="answer"> <input type="button" value="Готово" onClick="check();"></form>
надпись на кнопке
надпись на кнопке
имя формыимя формыимя элементаимя элемента
делать по щелчкуделать по щелчку
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
Форма: обращение к элементам99
function check(){if ( calc.answer.value == "4" ) alert("Правильно!");else alert("Неправильно!");}
function check(){if ( calc.answer.value == "4" ) alert("Правильно!");else alert("Неправильно!");}
test.jsвывести сообщениевывести сообщение
Основы Web-дизайна: HTML и редактор HEFS
К. Поляков, 2007-2011 http://kpolyakov.narod.ru
100
Конец фильма
ПОЛЯКОВ Константин Юрьевичд.т.н., учитель информатики высшей категории,
ГОУ СОШ № 163, г. Санкт-Петербург[email protected]