Вы находитесь на странице: 1из 31

Создание веб-сайтов

§ 27. РИСУНКИ

1
Создание веб-сайтов, 11 класс 2

Форматы рисунков
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)
• прозрачность и полупрозрачность (альфа-канал)
• нет анимации
• плохо сжимает мелкие рисунки
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 3

Форматы рисунков
SVG (Scalable Vector Graphics, масштабируемые
векторные изображения)
<svg>
<svg>
<rect
<rect width="135"
width="135" height="30"
height="30"
x="0"
x="0" y="10"
y="10"
stroke-width="1"
stroke-width="1" stroke="rgb(0,0,0)"
stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/>
fill="rgb(255,255,255)"/>

<rect
<rect width="135"
width="135" height="30"
height="30" x="0"
x="0" y="40"
y="40"
stroke-width="1"
stroke-width="1" stroke="rgb(0,0,0)"
stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
fill="rgb(0,0,255)"/>
<rect
<rect width="135"
width="135" height="30"
height="30" x="0"
x="0" y="70"
y="70"
stroke-width="1"
stroke-width="1" stroke="rgb(0,0,0)"
stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>
fill="rgb(255,0,0)"/>
</svg>
</svg>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 4

Рисунки в документе
из той же папки:
image source
(изображение) (источник)

<img src="night.jpg">

из другой папки:
<img src="images/night.jpg">

<img src="../../images/night.jpg">

с другого сервера:
<img src="http://example.com/img/night.jpg">

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 5

Выравнивание
<img src="flag.jpg" align="left">
left right

top bottom middle


(по умолчанию)

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 6

Отступы
<img src="net.jpg" <img src="net.jpg"
align="left"> align="left"
hspace="10"
vspace="10">

vspace
(vertical space)

hspace
(horizontal space)

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 7

Другие атрибуты

<img src="night.jpg"
надпись
надпись на
на месте
месте
рисунка,
рисунка, если
если его
его нет
нет
alt="Фото: Ладога"

всплывающая
title="Ночь на Ладоге"
всплывающая
подсказка
подсказка
width="800"
размеры
размеры позволяют:
позволяют: height="600">
•• растянуть
растянуть –– сжать
сжать
•• не
не портить
портить дизайн,
дизайн,
если
если рисунка
рисунка нет
нет

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 8

Рисунок-гиперссылка
локальная ссылка: иначе будет синяя
рамка вокруг
<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>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 9

Вставка векторных рисунков


тип
тип нестандартных
нестандартных
данных
данных

<object type="image/svg+xml"
data="test.svg" имя
имя файла
файла

width="48" height="48" размеры


размеры
align="left"> выравнивание
выравнивание
</object>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 10

Фоновый рисунок
body {
background: url(grad.jpg);
}

если рисунка нет…

body {
background: url(grad.jpg) #EEE;
}
'images/grad.jpg'
'images/grad.jpg'
'../images/grad.jpg‘
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'
'http://www.vasya.ru/images/grad.jpg'

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 11

Фоновый рисунок
если рисунок
меньше, он
повторяется

body{ background: url(grad.jpg) no-repeat; }

не повторять

body{ background: url(grad.jpg) repeat-y; }

повторять по
вертикали

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 12

Фоновый рисунок

! Не должно быть «швов»!

! Фон не должен мешать чтению!

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов

§ 28. МУЛЬТИМЕДИА

13
Создание веб-сайтов, 11 класс 14

Вставка мультимедийных файлов


Звуковой файл: имя файла
<embed src="myaw.wav"
autostart="false"></embed>

автозапуск

Флэш-анимация: имя файла

<embed src="cube.swf"
width="275" height="200">
</embed>
размеры

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 15

Вставка мультимедийных файлов


Видео:
адрес
адрес ролика
ролика
<embed
src="http://www.youtube.com/v/YvLNA5OW6xZ"
width="425" height="350">
</embed>
размеры
размеры

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 16

HTML5 – тэг audio


<audio имя
имя файла
файла
src="nature.ogg"
autostart="false" показывать
показывать элементы
элементы
управления
управления
controls="controls"
width="425"
height="350">
размеры
размеры
</audio>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 17

HTML5 – тэг video


<video src="sail.ogv"
controls="controls"
autostart="false"
width="425" height="350">
Ваш браузер не поддерживает элемент video.
</video>
<video
<video width="425"
width="425" height="350"
height="350"
controls="controls">
controls="controls">
<source
<source src="start.mp4"
src="start.mp4"
type='video/mp4;
type='video/mp4; codecs="avc1.42E01E,
codecs="avc1.42E01E, mp4a.40.2"'>
mp4a.40.2"'>
</video>
</video>
<video
<video width="425"
width="425" height="350"
height="350"
controls="controls">
controls="controls">
<source
<source src="finish.webm"
src="finish.webm"
type='video/webm;
type='video/webm; codecs="vp8,
codecs="vp8, vorbis"'>
vorbis"'>
</video>
</video>
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов

§ 29. ТАБЛИЦЫ

18
Создание веб-сайтов, 11 класс 19

Простые таблицы
<table border="1">
. . . толщина
толщина рамки
рамки
</table>

table
table row
row
<table border="1">
(строка)
(строка) <tr>
<td>Вася</td>
table
table data
data <td>Петров</td>
(ячейка
(ячейка сс
данными)
данными) </tr>
</table>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 20

Заголовки таблиц
<table border="1"> table header
<tr> (заголовок) жирный, по
<th>месяц</th> центру
</tr>
<tr>
<td>январь</td>
</tr>
<tr>
<td>февраль</td>
</tr>
<tr>
<td>март</td>
</tr>
</table>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 21

Объединение ячеек – столбцы


<table border="1">
<tr>
<th colspan="3">месяц</th>
</tr>
<tr>
column span
<td>январь</td> (охват столбцов)
<td>февраль</td>
<td>март</td>
</tr>
</table>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 22

Объединение ячеек – строки


<table border="1">
<tr>
<th rowspan="3">Привет,</th>
<td>Вася!</td>
</tr> row span
<tr> (охват строк)
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 23

Табличная вёрстка
<table>
<tr>
<td>
<table border="1">
<tr>
<th>Франция</th> скрытая таблица!
<td>Париж</td>
</tr>
</table>
</td>
<td>Самая большая страна
Западной Европы.</td>
</tr>
</table>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 24

Вложенные таблицы
<table
<table border="0"
border="0" cellspacing=10>
cellspacing=10>
<tr><td>
<tr><td>
<table
<table border="1">
border="1">
<tr><td>Вася</td><td>Петя</td></tr>
<tr><td>Вася</td><td>Петя</td></tr>
<tr><td>Маша</td><td>Даша</td></tr>
<tr><td>Маша</td><td>Даша</td></tr>
</table>
</table>
</td>
</td>
<td>
<td>
<table
<table border="1">
border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>1</td><td>22</td></tr>
<tr><td>333</td><td>4444</td></tr>
<tr><td>333</td><td>4444</td></tr>
</table>
</table>
</td></tr>
</td></tr>
</table>
</table>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 25

Размеры
всей таблицы: высота в пикселях

<table width="60%" height="300">


... ширина в пикселях
</table> или в % от ширины
окна браузера
строки:
<tr height="50">
...
ширина в пикселях
</tr>
или в % от ширины
или в % от ширины
ячейки: таблицы
<td width="25%" height="50">
...
</td>
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 26

Размеры (через CSS)


всей таблицы:
table.spec { <table class="spec">
width: 60%; ...
height: 300; </table>
}
строки:
table.spec tr {
height: 50px;
}
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 27

Выравнивание
всей таблицы:
left,
left,
<table
<table align="center">
align="center"> center,
center,
...
... right
right
</table>
</table>
left,
left,
информации в ячейках: center,
center,
<table right
right
<table border="1">
border="1"> top,
top,
<tr
<tr align="center"
align="center" middle,
middle,
valign="top">
valign="top"> bottom
bottom
<td
<td width="120">по
width="120">по центру,
центру,
по
по верхней
верхней границе</td>
границе</td>
<td
<td align="right"
align="right" valign="middle"
valign="middle"
width="200">по
width="200">по правой
правой границе,
границе,
по
по середине</td>
середине</td>
</tr>
</tr>
</table>
</table>
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 28

Выравнивание (через CSS)


<table
<table class="ex" border="1">
border="1">
<tr
<tr class="centop">
class="centop">
<td>По
<td>По центру,
по
по верхней границе</td>
границе</td>
<td
<td class="rmid">По
class="rmid">По правой
правой
границе,
границе, попо середине</td> left,
</tr>
</tr> center,
</table>
</table> table.ex
table.ex tr.centop
tr.centop {{ right
text-align:
text-align: center;
center;
vertical-align:
vertical-align: top;
top; top,
height:100px;
height:100px;
}} middle,
table.ex
table.ex td.rmid
td.rmid {{ bottom
text-align:
text-align: right;
right;
vertical-align:
vertical-align: middle;
middle;
width:200px;
width:200px;
}}
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 29

Фон и цвет текста (через CSS)


<table
<table border="1"
border="1" class="qq">
class="qq">
<tr
<tr class="spec">
class="spec">
<td>Привет!</td>
<td>Привет!</td>
<td
<td class="r"></td>
class="r"></td>
</tr> table.qq
table.qq td
td {{
</tr>
<tr> background:
background: green;
green;
<tr>
<td }} цвет
цвет фона
фона
<td class="pic">
class="pic">
Таблица table.qq
table.qq tr.spec
tr.spec tdtd {{
Таблица
из background:
background: blue;
blue;
из двух
двух строк</td>
строк</td>
<td>и color:
color: white;
white;
<td>и двух
двух столбцов</td>
столбцов</td>
</tr> }}
</tr>
</table> table.qq
table.qq tr.spec
tr.spec td.r
td.r {{
</table>
background:
background: red;
red;
рисунок
}}
table.qq
table.qq td.pic
td.pic {{
background:
background: url("web.jpg");
url("web.jpg");
}}
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 30

Отступы
интервал
интервал между
между отступ
отступ внутри
внутри
ячейками
ячейками ячеек
ячеек

<table
<table cellspacing
cellspacing == ""10"
10" cellpadding
cellpadding == ""10"
10"
bgcolor
bgcolor == blue>
blue>
<tr
<tr bgcolor
bgcolor == white>
white>
<td
<td width
width == ""100">1</td>
100">1</td>
<td width == "100">2</td>
<td width "100">2</td>
</tr>
</tr>
</table>
</table>

cellpadding cellspacing

cellpadding cellspacing
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 31

Отступы (через CSS)


идентификатор
идентификатор –– уникальное
уникальное имя
имя

<table
<table id="qq">
id="qq"> table#qq
table#qq {{
<tr> background:
background: blue;
blue;
<td> 11 </td>
</td> border-collapse:
border-collapse: separate;
separate;
<td> 22 </td>
</td> border-spacing:
border-spacing: 10px;
10px;
</tr>
</tr> padding:
padding: 10px;
10px;
</table>
</table> }} кроме
кроме IE
IE 66
#qq
#qq tr
tr {{
background:
background: white;
white;
}}

padding border-spacing

padding border-spacing
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru