Похожие презентации:
Создание веб-сайтов
1. Создание веб-сайтов
1Создание веб-сайтов
Текстовые веб-страницы
2. Как создать веб-страницу?
2Как создать веб-страницу?
Любой текстовый редактор (Блокнот и т.п.)
2×ЛКМ
Текстовые редакторы с подсветкой HTML-тэгов:
Sublime Text (sublimetext.com)
бесплатно!
NotePad++ (notepad-plus-plus.org)
Bluefish (bluefish.openoffice.nl)
Редакторы WYSIWYG = What You See Is What You Get
TinyMCE (www.tinymce.com)
бесплатно!
Kompozer (kompozer.net)
CKEditor (ckeditor.com)
openWYSIWYG (www.openwebware.com)
BlueGriffon (bluegriffon.org)
3. Первая веб-страница
3Первая веб-страница
Тэг – команда языка HTML
<html>
открывающий тэг
</html>
закрывающий тэг
контейнер
(парный тэг)
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>
4. Заголовки
4Заголовки
заголовок
документа
<h1>
<h2>
<h3>
<h4>
заголовок
раздела
– заголовок документа
– заголовок раздела
– заголовок подраздела
– заголовок параграфа
<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и
обработкой информации человеку приходилось решать
во все времена...
5. Выравнивание заголовков
5Выравнивание заголовков
атрибут (свойство)
<h1 align="center">Глава 1. Информация</h1>
left,
center,
right
6. Абзацы (параграфы)
6Абзацы (параграфы)
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
!
Браузер «проглатывает» переходы на новую строку!
7. Абзацы (параграфы)
7Абзацы (параграфы)
paragraph – абзац
<p>И вечный бой! Покой нам только снится</p>
<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>
интервал
8. Выравнивание абзацев
8Выравнивание абзацев
left, center, right, justify
<p align="justify">
Молекула воды испарилась из кипящего
чайника и, подлетая к потолку, лоб в
лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</p>
?
Что плохо?
Решение:
align="left"
9. Переход на новую строку
9Переход на новую строку
break –
разрыв
И вечный бой! Покой нам только снится
<br>Сквозь кровь и пыль...
<br>Летит, летит степная кобылица
<br>И мнёт ковыль...
10. Специальные символы (HTML entities)
10Специальные символы (HTML entities)
Символ
Название
HTML-код
неразрывный пробел
–
–
короткое тире
—
—
(длинное) тире
§
§
«
«
левая русская кавычка
»
»
правая русская кавычка
<
<
левая угловая скобка
>
>
правая угловая скобка
©
©
символ авторского права
®
®
зарегистрированная торговая марка
°
°
градус
²
²
квадрат
³
³
куб
×
×
÷
÷
параграф
знак умножения
знак деления
11. Применение специальных символов
11Применение специальных символов
Неразрывный пробел ( )
не отрывать:
Дом сдали в 2011 году.
год
А.С. Пушкин
инициалы
Пёс весил 12 кг.
единицы
измерения
Из дома вышел А.С.
Пушкин – солнце
русской поэзии.
12. Применение специальных символов
12Применение специальных символов
Длинное тире (—)
Вышел А.С. Пушкин —
солнце русской поэзии.
не начинать
строку с тире!
Вышел А.С. Пушкин
– солнце русской
Что плохо?
?
поэзии.
Короткое тире (–)
Дорога Васюки–Васютино строилась
в 2007–2013 годах.
13. Применение специальных символов
13Применение специальных символов
Угловые скобки (< >)
<p>Верно ли, что X < Y?</p>
?
В чём проблема?
это начало
тэга?
X < Y
14. Маркированные списки
14Маркированные списки
unordered list
(неупорядоченный список)
list item
(элемент списка)
<ul>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ul>
изменение маркера:
<ul type="disk">
...
</ul>
disk
circle ○
square ■
15. Нумерованные списки
15Нумерованные списки
ordered list
(упорядоченный список)
<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>
изменение нумерации:
1, i, I, a, A
<ol type="i" start="4">
...
</ol>
16. Многоуровневые списки
16Многоуровневые списки
<ol>
<li>Россия
<ul>
<li>Москва</li>
<li>Санкт-Петербург</li>
</ul>
</li>
<li>Украина
<ul>
<li>Киев</li>
<li>Одесса</li>
</ul>
</li>
</ol>
17. Гиперссылки (локальные)
17Гиперссылки (локальные)
страница в том же каталоге:
Переход на
<a href="newpage.html">новую страницу</a>.
anchor
(якорь)
hyper reference
(гиперссылка)
во вложенном каталоге:
<a href="news/info.htm">Информация</a>.
в родительском каталоге:
<a href="../info.htm">Информация</a>.
в соседнем каталоге:
<a href="../news/info.htm">Информация</a>.
18. Гиперссылки (внешние)
18Гиперссылки (внешние)
на URL:
<a href="http://example.net/news/info.htm">
Информация</a>.
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:[email protected]">
Напишите мне!</a>
19. Как записать гиперссылки от show.htm?
19Как записать гиперссылки от show.htm?
main
index.htm
goods
goods.htm
food
food.htm
show
show.htm
history
hist.htm
before
before.htm
20. Метки внутри документов
20Метки внутри документов
Там в лесу живет
<a href="#bear">медведь</a>.
...
...
...
<a name="bear"></a>
<h2>Медведь</h2>
Медведь — хищное
млекопитающее семейства
медвежьих.
на метку в другом файле:
<a href="animals.htm#bear">медведь</a>
<a href="http://qq.net/a.htm#bear">медведь</a>
21. Куда переход?
21Куда переход?
<a href="example.html">...</a>
<a href="../example.html">...</a>
<a href="../../../example.html">...</a>
<a href="../new/old/example.html">...</a>
<a href="example.html#resume">...</a>
<a href="download/example.zip">...</a>
<a href="mailto:[email protected]">...</a>
22. Создание веб-сайтов
22Создание веб-сайтов
Оформление документов
23. Содержание и оформление
23Содержание и оформление
Веб-страница:
оформление
содержание (контент)
содержание
оформление
<h1>Сборник задач по физике</h1>
<p class="author">Григорий Остер</p>
<h2>Задача 61</h2>
Петя ехал к бабушке на электричке, и всю
дорогу над ним издевались какие-то два
неведомые ему явления.
логическая разметка
(*.html)
физическая разметка
(*.css)
24. Логическая разметка (HTML)
24Логическая разметка (HTML)
Выделение (emphasize):
<em>Вася</em>
Сильное выделение (strong):
<strong>Вася</strong>
Программный код (code):
<code>a:=b+c;</code>
Определение (definition):
<dfn>Информация</dfn> — это...
Цитата (citation):
<cite>Карету мне, карету!</cite>
Сокращение (abbreviation):
<abbr>НИИЧАВО</abbr>
25. Оформление текстов программ
25Оформление текстов программ
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
preformatted (уже
отформатированный)
<pre>
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
</pre>
26. Тэги физической разметки HTML
26Тэги физической разметки HTML
Курсив (italic):
<i>Вася</i>
Вася
Жирный (bold):
<b>Вася</b>
Вася
Подчёркивание (underline):
<u>Вася</u>
Вася
Зачёркивание (strikeout):
<s>Вася</s>
Вася
Верхний индекс (superscript):
Вася<sup>2</sup>
Вася2
Нижний индекс (subscript):
Вася<sub>2</sub>
Вася2
27. Стилевые файлы
27Стилевые файлы
содержание
<h1>Рекурсия</h1>
У попа была собака, он её любил,
Она съела кусок мяса, он её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...
оформление
main.css
mob.css
printer.css
CSS (Cascading Style Sheets) – каскадные
таблицы стилей.
28. Стилевые файлы
28Стилевые файлы
test.css
селектор
название тэга
body { свойство значение
color: white;
background: #FF6600;
}
color – цвет символов
background – цвет фона
R = FF16 = 255
G = 6616 = 102
B=0
29. Подключение стилевого файла
29Подключение стилевого файла
qq.html
Multipurpose Internet Mail Extension
<html>
таблица стилей
тип данных MIME
<head>
<title>Страница с файлом стилей</title>
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
Привет, Вася!
</body>
</html>
test.css
body {
color: white;
background: #0000E0;
}
30. Наследование стилей
30Наследование стилей
<body>
Привет, Вася!
<p>Петя, тебе тоже привет!</p>
</body>
body {
color: white;
background: #0000E0;
наследуется
}
не наследуется
(прозрачный фон)
31. Стили для элементов: шрифты
31Стили для элементов: шрифты
для всех
абзацев
семейство
шрифтов
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
p {
font-family: Arial,sans-serif;
размер в пикселях
font-size: 20px;
font-style: italic;
normal – обычный
italic - курсив
font-weight: bold;
}
normal – обычный
bold - жирный
32. Стили: размеры, выравнивание
32Стили: размеры, выравнивание
выравнивание:
left
center
right
j u s t i f y
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.
80%
100px
33. Рамка, поля, отступы
33Рамка, поля, отступы
рамка
отступы
снаружи
отступы
внутри
40px
5px
solid – сплошная
dashed - штриховая
dotted – точечная
толщина
p {
background: #ccffcc;
цвет
border: 1px solid green;
margin: 0 40px 20px 40px;
padding: 5px;
сверху, справа,
}
снизу, слева
со всех сторон
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.
20px
40px
34. Рамка, поля и отступы
34Рамка, поля и отступы
border-top
margin-top
padding-top
border-right
border-left
margin-left
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam nunc
padding-left
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.
padding-bottom
margin-bottom
padding-right
border-bottom
margin-right
35. Стили гиперссылок
35Стили гиперссылок
Все гиперссылки:
убрать
подчёркивание
a {
color: green;
text-decoration: none;
}
Посещённые гиперссылки:
a:visited { color: #0000AA; }
псевдокласс
Гиперссылки при наведении мыши:
a:hover { псевдокласс
color: red;
text-decoration: underline;
}
подчёркивание
36. Классы
36Классы
<p class="error">Ошибка!
Что-то с памятью.
</p>
каскад!
!
для абзацев
класса error
p.error {
background:red;
}
p {
background:blue;
color:white;
}
Более конкретное указание отменяет более общее!
37. Классы
37Классы
для всех элементов
класса error
.error {
background:red;
color:white;
}
элемент в
тексте
<p>
<span class="error">Ошибка!</span>
Что-то с памятью.
</p>
38. Фоновый рисунок
38Фоновый рисунок
p.hallo {
background: white url(images/grad.jpg);
}
<p class="hallo">
Привет, Вася!
</p>
Привет, Вася!
p.hallo {
background: url(grad.jpg) repeat-y;
}
Привет, Вася!
39. Фоновый рисунок без повторения
39Фоновый рисунок без повторения
[email protected]
p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}
<p class="email">
<a href="mailto:[email protected]">[email protected]</a>
</p>
[email protected]
20px
40. Составные селекторы
40Составные селекторы
Общие свойства для нескольких тэгов:
code, pre {
font-weight: bold;
font-family: Courier New, monospace;
}
Вложенные элементы:
a внутри em
em a {
font-style: normal;
}
41. Сложные селекторы
41Сложные селекторы
ссылки внутри абзаца класса email
p.email a {
убрать подчеркивание
color: green;
text-decoration:none;
}
посещённые ссылки
p.email a:visited {
color: #F0F;
то же, что #FF00FF
}
мышь над ссылкой
p.email a:hover {
подчеркнуть
color: #00F;
text-decoration:underline;
}
42. Создание веб-сайтов
42Создание веб-сайтов
Рисунки
43. Форматы рисунков
43Форматы рисунков
GIF (Graphic Interchange Format)
• сжатие без потерь (LZW)
• прозрачные области
• анимация
• только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
• сжатие с потерями
• только True Color (16,7 млн. цветов)
• нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
44. Форматы рисунков
44Форматы рисунков
SVG (Scalable Vector Graphics, масштабируемые
векторные изображения)
<svg>
<rect width="135" height="30"
x="0" y="10"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/>
<rect width="135" height="30" x="0" y="40"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
<rect width="135" height="30" x="0" y="70"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>
</svg>
45. Рисунки в документе
45Рисунки в документе
из той же папки:
image
(изображение)
source
(источник)
<img src="night.jpg">
из другой папки:
<img src="images/night.jpg">
<img src="../../images/night.jpg">
с другого сервера:
<img src="http://example.com/img/night.jpg">
46. Выравнивание
46Выравнивание
<img src="flag.jpg" align="left">
left
top
right
bottom
(по умолчанию)
middle
47. Отступы
47Отступы
<img src="net.jpg"
align="left">
<img src="net.jpg"
align="left"
hspace="10"
vspace="10">
vspace
(vertical space)
hspace
(horizontal space)
48. Другие атрибуты
48Другие атрибуты
• надпись на месте
рисунка, если его нет
• всплывающая
подсказка
<img src="night.jpg"
alt="Ночь на Ладоге"
width="800"
размеры позволяют:
• растянуть – сжать
• не портить дизайн,
если рисунка нет
height="600">
49. Рисунок-гиперссылка
49Рисунок-гиперссылка
локальная ссылка:
иначе будет синяя
рамка вокруг
<a href="gallery.htm">
<img src="night.jpg" border="0">
</a>
если </a> не вплотную к
<img …>, будет «хвост»
ссылка на другой сервер:
не будет
«хвоста»
<a href="http://www.mail.ru">
<img src="mailru.jpg"
alt="Бесплатная почта" border="0"></a>
50. Вставка векторных рисунков
50Вставка векторных рисунков
тип нестандартных
данных
<object type="image/svg+xml"
имя файла
data="test.svg"
width="48" height="48"
размеры
align="left">
выравнивание
</object>
51. Фоновый рисунок
51Фоновый рисунок
body {
background: url(grad.jpg);
}
если рисунка нет…
body {
background: url(grad.jpg) #EEE;
}
'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'
52. Фоновый рисунок
52Фоновый рисунок
если рисунок
меньше, он
повторяется
body{ background: url(grad.jpg) no-repeat; }
не повторять
body{ background: url(grad.jpg) repeat-y; }
повторять по
вертикали
53. Фоновый рисунок
53Фоновый рисунок
!
Не должно быть «швов»!
!
Фон не должен мешать чтению!
54. Создание веб-сайтов
54Создание веб-сайтов
Мультимедиа
55. Вставка мультимедийных файлов
55Вставка мультимедийных файлов
Звуковой файл:
имя файла
<embed src="myaw.wav"
autostart="false"></embed>
автозапуск
Флэш-анимация:
имя файла
<embed src="cube.swf"
width="275" height="200">
</embed>
размеры
56. Вставка мультимедийных файлов
56Вставка мультимедийных файлов
Видео:
адрес ролика
<embed
src="http://www.youtube.com/v/YvLNA5OW6xZ"
width="425" height="350">
</embed>
размеры
57. HTML5 – тэг audio
57HTML5 – тэг audio
имя файла
<audio
src="nature.ogg"
autostart="false"
показывать элементы
управления
controls="controls"
width="425"
height="350">
размеры
</audio>
58. HTML5 – тэг video
58HTML5 – тэг video
<video src="sail.ogv"
controls="controls"
autostart="false"
width="425" height="350">
Ваш браузер не поддерживает элемент video.
</video>
<video width="425" height="350"
controls="controls">
<source src="start.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<video width="425" height="350"
controls="controls">
<source src="finish.webm"
type='video/webm; codecs="vp8, vorbis"'>
</video>
59. Создание веб-сайтов
59Создание веб-сайтов
Таблицы
60. Простые таблицы
60Простые таблицы
<table border="1">
. . .
толщина рамки
</table>
table row
(строка)
table data
(ячейка с
данными)
<table border="1">
<tr>
<td>Вася</td>
<td>Петров</td>
</tr>
</table>
61. Заголовки таблиц
61Заголовки таблиц
<table border="1">
<tr>
<th>месяц</th>
</tr>
<tr>
<td>январь</td>
</tr>
<tr>
<td>февраль</td>
</tr>
<tr>
<td>март</td>
</tr>
</table>
table header
(заголовок)
жирный, по
центру
62. Объединение ячеек – столбцы
62Объединение ячеек – столбцы
<table border="1">
<tr>
<th colspan="3">месяц</th>
</tr>
<tr>
column span
<td>январь</td>
(охват столбцов)
<td>февраль</td>
<td>март</td>
</tr>
</table>
63. Объединение ячеек – строки
63Объединение ячеек – строки
<table border="1">
<tr>
<th rowspan="3">Привет,</th>
<td>Вася!</td>
</tr>
row span
<tr>
(охват строк)
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>
64. Табличная вёрстка
64Табличная вёрстка
<table>
<tr>
<td>
<table border="1">
<tr>
<th>Франция</th>
<td>Париж</td>
</tr>
</table>
</td>
<td>Самая большая страна
Западной Европы.</td>
</tr>
</table>
скрытая таблица!
65. Вложенные таблицы
65Вложенные таблицы
<table border="0" cellspacing=10>
<tr><td>
<table border="1">
<tr><td>Вася</td><td>Петя</td></tr>
<tr><td>Маша</td><td>Даша</td></tr>
</table>
</td>
<td>
<table border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>333</td><td>4444</td></tr>
</table>
</td></tr>
</table>
66. Размеры
66Размеры
всей таблицы:
высота в пикселях
<table width="60%" height="300">
...
ширина в пикселях
</table>
или в % от ширины
строки:
окна браузера
<tr height="50">
...
ширина в пикселях
</tr>
ячейки:
или в % от ширины
таблицы
<td width="25%" height="50">
...
</td>
67. Размеры (через CSS)
67Размеры (через CSS)
всей таблицы:
table.spec {
width: 60%;
height: 300px;
}
строки:
ячейки:
<table class="spec">
...
</table>
table.spec tr {
height: 50px;
}
table.spec td.qq {
width: 25%;
height: 50px;
}
68. Выравнивание
68Выравнивание
всей таблицы:
<table align="center">
...
</table>
информации в ячейках:
left,
center,
right
left,
center,
right
<table border="1">
<tr align="center"
valign="top">
<td width="120">по центру,
по верхней границе</td>
<td align="right" valign="middle"
width="200">по правой границе,
по середине</td>
</tr>
</table>
top,
middle,
bottom
69. Выравнивание (через CSS)
69Выравнивание (через CSS)
<table class="ex" border="1">
<tr class="centop">
<td>По центру,
по верхней границе</td>
<td class="rmid">По правой
left,
границе, по середине</td>
center,
</tr>
table.ex tr.centop {
</table>
right
text-align: center;
vertical-align: top;
top,
height:100px;
middle,
}
bottom
table.ex td.rmid {
text-align: right;
vertical-align: middle;
width:200px;
}
70. Фон и цвет текста (через CSS)
70Фон и цвет текста (через CSS)
<table border="1" class="qq">
<tr class="spec">
<td>Привет!</td>
<td class="r"></td>
table.qq td {
</tr>
background: green;
<tr>
}
цвет фона
<td class="pic">
table.qq tr.spec td {
Таблица
background: blue;
из двух строк</td>
color: white;
<td>и двух столбцов</td>
}
</tr>
table.qq tr.spec td.r {
</table>
background: red;
рисунок
}
table.qq td.pic {
background: url("web.jpg");
}
71. Отступы
71Отступы
интервал между
ячейками
отступ внутри
ячеек
<table cellspacing = "10" cellpadding = "10"
bgcolor = blue>
<tr bgcolor = white>
<td width = "100">1</td>
<td width = "100">2</td>
</tr>
</table>
cellpadding
cellpadding
cellspacing
cellspacing
72. Отступы (через CSS)
72Отступы (через CSS)
идентификатор – уникальное имя
<table id="qq">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
padding
padding
table#qq {
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
кроме IE 6
}
#qq tr {
background: white;
}
border-spacing
border-spacing
73. Создание веб-сайтов
73Создание веб-сайтов
Блоки
74. Что такое блок (div)?
74Что такое блок (div)?
<div>
...
</div>
<p>
<table>
<a>
<img>
...
свойства блока:
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.
padding
border
margin
75. Рамка, поля и отступы
75Рамка, поля и отступы
border-top
margin-top
padding-top
border-right
border-left
margin-left
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam nunc
padding-left
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.
padding-bottom
margin-bottom
padding-right
border-bottom
margin-right
76. Стили для блоков
76Стили для блоков
<div class="info" id="result">
Ответ: 45.
идентификатор
</div>
(уникальный!)
.info {
margin: 5px 5px 10px 20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}
77. «Плавающий» блок
77«Плавающий» блок
<div class="picture">
<img src="dog.jpg"
width="100"
height="66">
<p>На природе</p>
</div>
div
.picture { float:left; margin: 5px; }
.picture p {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}
78. Создание веб-сайтов
78Создание веб-сайтов
Динамический HTML
79. Что такое DHTML?
79Что такое DHTML?
Динамический HTML (DHTML) – это технология
создания интерактивных сайтов, использующая HTML,
CSS, язык программирования (чаще всего JavaScript) и
объектную модель документа (англ. DOM = Document
Object Model).
<html>
<head>
<title>DOM</title>
</head>
<body>
<p>Привет,
<em>Вася!</em></p>
</body>
</html>
document
html
head
body
title
p
DOM Привет, em
Вася!
80. «Живой» рисунок
80«Живой» рисунок
box_closed.gif
box_opened.gif
<img src="box_closed.gif"
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">
свойство src
этого объекта
обработчик события
(Javascript)
this.src='box_opened.gif'
вложенные
кавычки
81. Скрытый блок
81Скрытый блок
ЛКМ
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>
.hidden {
display:none;
}
не показывать
?
Зачем нужен id?
block – во всю ширину
inline – в тексте
82. Javascript-файл
82Javascript-файл
Файл test.js
функция
имя функции
function show ( name )
{
переменная
найти элемент по id
var elem = document.getElementById(name);
если нашли
if ( elem )
elem.style.display = "block";
}
изменить свойство
display
block – во всю ширину
inline – в тексте
none – не показывать
83. Подключение Javascript-файла
83Подключение Javascript-файла
тип файла
<head>
<script type="text/javascript"
src="test.js"></script>
...
имя файла
</head>
84. Вызов функции
84Вызов функции
ссылка на эту
страницу
<a href="#"
по щелчку вызвать
функцию
onClick="show('details');return false;">
Показать детали
</a>
дальнейшая
обработка (переход
по ссылке) не нужна
85. HTML-файл
85HTML-файл
<html>
<head>
<title>Скрытый блок</title>
<script type="text/javascript"
src="test.js"></script>
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<a href=# onClick="show('details'); return false;">
Показать детали</a>
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>
</body>
</html>
?
Как сделать два скрытых блока?
86. Формы
86Формы
форма – набор элементов диалога
<form name="calc">
поле ввода
<input name="answer">
<input type="button"
value="Готово"
кнопка
текст на кнопке
onClick="check();">
</form>
что делать при щелчке
87. Формы
87Формы
<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>
Обработка события «щелчок мышью»:
function check()
введённый текст
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}
В файл
calc.js