Рисунки. Таблицы

Создание веб-сайтов
§ 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
Форматы рисунков
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"
height="30" x="0"
x="0" y="40"
y="40"
stroke-width="1"
stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
fill="rgb(0,0,255)"/>
<rect
<rect width="135"
height="30" x="0"
x="0" y="70"
y="70"
stroke-width="1"
stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>
fill="rgb(255,0,0)"/>
</svg>
</svg>

Рисунки в документе
из той же папки:
image source
(изображение) (источник)
<img src="night.jpg">
из другой папки:
<img src="images/night.jpg">
<img src="../../images/night.jpg">
с другого сервера:
<img src="http://example.com/img/night.jpg">

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

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

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

Другие атрибуты
<img src="night.jpg"
надпись
надпись на
на месте
месте
рисунка,
рисунка, если
если его
его нет
нет
alt="Фото: Ладога"
всплывающая
title="Ночь на Ладоге"
всплывающая
подсказка
подсказка
width="800"
размеры
размеры позволяют:
позволяют: height="600">
•• растянуть
растянуть –– сжать
сжать
•• не
не портить
портить дизайн,
дизайн,
если
если рисунка
рисунка нет
нет

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

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

тип
тип нестандартных
нестандартных
данных
данных
<object type="image/svg+xml"
data="test.svg" имя
имя файла
файла
width="48" height="48" размеры

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

Фоновый рисунок
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'

если рисунок
меньше, он
повторяется
body{ background: url(grad.jpg) no-repeat; }
не повторять
body{ background: url(grad.jpg) repeat-y; }
повторять по
вертикали

! Не должно быть «швов»!
! Фон не должен мешать чтению!

§ 28. МУЛЬТИМЕДИА
13
Вставка мультимедийных файлов

Звуковой файл: имя файла
<embed src="myaw.wav"
autostart="false"></embed>
автозапуск
Флэш-анимация: имя файла
<embed src="cube.swf"
width="275" height="200">
</embed>
размеры

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

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

HTML5 – тэг audio

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

HTML5 – тэг video

<video src="sail.ogv"
controls="controls"
autostart="false"
Ваш браузер не поддерживает элемент video.
</video>
<video
<video width="425"
height="350"
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"
height="350"
<source
<source src="finish.webm"
src="finish.webm"
type='video/webm;
type='video/webm; codecs="vp8,
codecs="vp8, vorbis"'>
vorbis"'>
</video>
</video>
§ 29. ТАБЛИЦЫ
18
Простые таблицы
<table border="1">
. . . толщина
толщина рамки
рамки
</table>
table
table row
row
<table border="1">
(строка)
(строка) <tr>
<td>Вася</td>
table
table data
data <td>Петров</td>
(ячейка
(ячейка сс
данными)
данными) </tr>
</table>

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

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

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

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

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

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

Вложенные таблицы
<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>

Размеры
всей таблицы: высота в пикселях
<table width="60%" height="300">

... ширина в пикселях
</table> или в % от ширины
окна браузера
строки:
<tr height="50">
...
ширина в пикселях
</tr>
или в % от ширины
или в % от ширины
ячейки: таблицы
<td width="25%" height="50">
...
</td>
Размеры (через CSS)

всей таблицы:
table.spec { <table class="spec">
width: 60%; ...
height: 300; </table>
}
строки:
table.spec tr {
height: 50px;
}
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
Выравнивание
всей таблицы:
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>
Выравнивание (через 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;
}}
Фон и цвет текста (через 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");
}}
Отступы
интервал
интервал между
между отступ
отступ внутри
внутри
ячейками
ячейками ячеек
ячеек
<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
Отступы (через 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

Рисунки. Таблицы

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Рисунки. Таблицы

Загружено:

Авторское право:

Доступные форматы

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

PNG (Portable Network Graphic)

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

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

top bottom middle

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

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

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

если </a> не вплотную к

ссылка на другой сервер: не будет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5 – тэг audio

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

HTML5 – тэг video

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам также может понравиться