Создание веб-сайтов
1/21
707.00K
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
English     Русский Rules