Similar presentations:
11u-4_ВебСайты (1)
1. Создание веб-сайтов
1Создание веб-сайтов
§ 22. Веб-сайты и веб-страницы
§ 23. Текстовые веб-страницы
§ 24. Оформление документов
§ 25. Рисунки, звук, видео
§ 26. Таблицы
§ 27. Блоки
§ 28. XML и XHTML
§ 29. Динамический HTML
§ 30. Размещение веб-сайтов
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
2. Создание веб-сайтов
2Создание веб-сайтов
§ 26. Таблицы
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
3. Простые таблицы
Создание веб-сайтов, 11 класс3
Простые таблицы
<table border="1">
. . .
толщина рамки
</table>
table row
(строка)
table data
(ячейка с
данными)
<table border="1">
<tr>
<td>Вася</td>
<td>Петров</td>
</tr>
</table>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
4. Заголовки таблиц
Создание веб-сайтов, 11 класс4
Заголовки таблиц
<table border="1">
<tr>
<th>месяц</th>
</tr>
<tr>
<td>январь</td>
</tr>
<tr>
<td>февраль</td>
</tr>
<tr>
<td>март</td>
</tr>
</table>
К.Ю. Поляков, Е.А. Ерёмин, 2018
table header
(заголовок)
жирный, по
центру
http://kpolyakov.spb.ru
5. Объединение ячеек – столбцы
Создание веб-сайтов, 11 класс5
Объединение ячеек – столбцы
<table border="1">
<tr>
<th colspan="3">месяц</th>
</tr>
<tr>
column span
<td>январь</td>
(охват столбцов)
<td>февраль</td>
<td>март</td>
</tr>
</table>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
6. Объединение ячеек – строки
Создание веб-сайтов, 11 класс6
Объединение ячеек – строки
<table border="1">
<tr>
<th rowspan="3">Привет,</th>
<td>Вася!</td>
</tr>
row span
<tr>
(охват строк)
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
7. Табличная вёрстка
Создание веб-сайтов, 11 класс7
Табличная вёрстка
<table>
<tr>
<td>
<table border="1">
<tr>
<th>Франция</th>
<td>Париж</td>
</tr>
</table>
скрытая таблица!
</td>
<td>Самая большая страна
Западной Европы.</td>
</tr>
</table>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
8. Вложенные таблицы
Создание веб-сайтов, 11 класс8
Вложенные таблицы
<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>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
9. Размеры
Создание веб-сайтов, 11 класс9
Размеры
всей таблицы:
высота в пикселях
<table width="60%" height="300">
...
ширина в пикселях
</table>
или в % от ширины
строки:
окна браузера
<tr height="50">
...
ширина в пикселях
</tr>
ячейки:
или в % от ширины
таблицы
<td width="25%" height="50">
...
</td>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
10. Размеры (через CSS)
Создание веб-сайтов, 11 класс10
Размеры (через CSS)
всей таблицы:
table.spec {
width: 60%;
height: 300;
}
строки:
ячейки:
<table class="spec">
...
</table>
table.spec tr {
height: 50px;
}
table.spec td.qq {
width: 25%;
height: 50px;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
11. Выравнивание
Создание веб-сайтов, 11 класс11
Выравнивание
всей таблицы:
<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>
К.Ю. Поляков, Е.А. Ерёмин, 2018
top,
middle,
bottom
http://kpolyakov.spb.ru
12. Выравнивание (через CSS)
Создание веб-сайтов, 11 класс12
Выравнивание (через 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;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
13. Фон и цвет текста (через CSS)
Создание веб-сайтов, 11 класс13
Фон и цвет текста (через 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");
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
14. Отступы
Создание веб-сайтов, 11 класс14
Отступы
интервал между
ячейками
отступ внутри
ячеек
<table cellspacing = "10" cellpadding = "10"
bgcolor = blue>
<tr bgcolor = white>
<td width = "100">1</td>
<td width = "100">2</td>
</tr>
</table>
cellpadding
cellpadding
К.Ю. Поляков, Е.А. Ерёмин, 2018
cellspacing
cellspacing
http://kpolyakov.spb.ru
15. Отступы (через CSS)
Создание веб-сайтов, 11 класс15
Отступы (через CSS)
идентификатор – уникальное имя
<table id="qq">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
padding
padding
К.Ю. Поляков, Е.А. Ерёмин, 2018
table#qq {
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
кроме IE 6
}
#qq tr {
background: white;
}
border-spacing
border-spacing
http://kpolyakov.spb.ru
16. Создание веб-сайтов
16Создание веб-сайтов
§ 27. Блоки
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
17. Что такое блок (div)?
Создание веб-сайтов, 11 класс17
Что такое блок (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
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
18. Рамка, поля и отступы
Создание веб-сайтов, 11 класс18
Рамка, поля и отступы
margin-top
border-top
padding-top
border-right
border-left
margin-left
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam nunc
padding-left
padding-right
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-right
margin-bottom
К.Ю. Поляков, Е.А. Ерёмин, 2018
border-bottom
http://kpolyakov.spb.ru
19. Стили для блоков
Создание веб-сайтов, 11 класс19
Стили для блоков
<div class="info" id="result">
Ответ: 45.
идентификатор
</div>
(уникальный!)
.info {
margin: 5px 5px 10px 20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
20. «Плавающий» блок
Создание веб-сайтов, 11 класс20
«Плавающий» блок
<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;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
21. Практическая работа
Создание веб-сайтов, 11 класс21
Практическая работа
Практическая работа № 29.
Таблицы
Практическая работа № 30.
Блоки
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru