Рабочие листы
к вашим урокам
Скачать
1 слайд
1
WEB-конструирование
2 слайд
Веб-сайты и веб-страницы
Текстовые веб-страницы
Оформление документов
Рисунки
Мультимедиа
Таблицы
Блоки
Динамический HTML
XML и XHTML
Размещение веб-сайтов
2
Содержание
3 слайд
Веб-сайты и веб-страницы
3
Создание веб-сайтов
4 слайд
Основные определения
4
Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки.
Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.).
Веб-страница – это гипертекстовый документ в Интернете.
Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками.
Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб-страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы).
Браузер – это программа для просмотра веб-страниц на экране монитора.
5 слайд
Что такое веб-страница?
5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis scelerisque metus, non hendrerit neque convallis placerat. Phasellus consequat convallis nisl, a volutpat quam posuere sed. Maecenas laoreet congue nibh, et euismod lectus varius sit amet. In tristique mattis leo, eget commodo ante egestas eget. Sed id purus quis ligula scelerisque fringilla. Suspendisse scelerisque, sapien id scelerisque imperdiet, tellus odio consequat nunc, eu fermentum diam lacus non urna. Praesent faucibus massa in risus sagittis a luctus justo aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent metus dolor, semper ut fermentum vel, imperdiet in risus. Nam a lectus lorem, dictum semper nulla. In eget ipsum non arcu aliquet lacinia. Morbi iaculis sodales metus, vel posuere orci vulputate vel. Nulla non felis sem, sagittis porttitor mi. Curabitur in tortor in nisi egestas cursus quis at sapien. Proin pulvinar, odio id lacinia suscipit, sem justo aliquam risus, nec suscipit enim felis at justo. Donec at nulla orci, suscipit auctor arcu. Donec nec tortor quis justo scelerisque cursus id et magna.
index.html
sunset.jpg
tree.jpg
images
media
laugh.wav
movie.flv
запрос на каждый файл!
HTML = Hypertext Markup Language
(язык разметки гипертекста)
HTML – это не язык программирования!
!
6 слайд
Какие бывают веб-страницы?
6
статические – готовые файлы *.htm, *.html
динамические – полностью или частично
создаются на сервере в момент запроса
*.php, *.asp, *.pl, *.cgi, *.shtml …
быстро загружаются
почти не нагружают сервер
невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)
работа с базами данных
загружаются медленнее
дополнительная нагрузка на сервер
7 слайд
Системы управления сайтами
7
CMS = Content Management System, система управления содержимым сайта.
Функции:
создание разделов сайта
создание страниц
база данных пользователей
управление доступом
обеспечение навигации и поиска
Не нужно знать HTML!
!
1c-bitrix.ru
Joomla!
joomla.org
Drupal
drupal.org
ucoz.ru
wordpress.org
бесплатно!
8 слайд
Интерактивные страницы
8
DHTML = Dynamic HTML, динамический HTML.
Скрипт или сценарий (англ. script) – это программный код для автоматизации действий пользователя.
Javascript
замена текста, оформления, рисунков
многоуровневые выпадающие меню
скрытие и показ частей страницы
проверка данных, введенные пользователем
выполнение вычислений
игры…
9 слайд
Текстовые веб-страницы
9
Создание веб-сайтов
10 слайд
Как создать веб-страницу?
10
Любой текстовый редактор (Блокнот и т.п.)
2×ЛКМ
Текстовые редакторы с подсветкой HTML-тэгов:
Sublime Text (sublimetext.com)
NotePad++ (notepad-plus-plus.org)
Bluefish (bluefish.openoffice.nl)
HEFS (kpolyakov.spb.ru/prog/hefs.htm)
Редакторы 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)
бесплатно!
бесплатно!
11 слайд
Первая веб-страница
11
<html>
</html>
Тэг – команда языка HTML
открывающий тэг
закрывающий тэг
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
контейнер (парный тэг)
12 слайд
Заголовки
12
заголовок документа
заголовок раздела
<h1> – заголовок документа
<h2> – заголовок раздела
<h3> – заголовок подраздела
<h4> – заголовок параграфа
<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...
13 слайд
Выравнивание заголовков
13
<h1 align="center">Глава 1. Информация</h1>
left,
center,
right
атрибут (свойство)
14 слайд
Абзацы (параграфы)
14
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
Браузер «проглатывает» переходы на новую строку!
!
15 слайд
Абзацы (параграфы)
15
<p>И вечный бой! Покой нам только снится</p>
<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>
paragraph – абзац
интервал
16 слайд
Выравнивание абзацев
16
<p align="justify">
Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</p>
left, center, right, justify
Что плохо?
?
Решение:
align="left"
17 слайд
Переход на новую строку
17
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
break – разрыв
18 слайд
Специальные символы (HTML entities)
18
19 слайд
Применение специальных символов
19
Дом сдали в 2011 году.
А.С. Пушкин
Пёс весил 12 кг.
Неразрывный пробел ( )
год
инициалы
единицы измерения
Из дома вышел А.С. Пушкин – солнце
русской поэзии.
не отрывать:
20 слайд
Применение специальных символов
20
Вышел А.С. Пушкин — солнце русской поэзии.
Длинное тире (—)
Вышел А.С. Пушкин – солнце русской поэзии.
не начинать строку с тире!
Короткое тире (–)
Дорога Васюки–Васютино строилась
в 2007–2013 годах.
Что плохо?
?
21 слайд
Применение специальных символов
21
Угловые скобки (< >)
<p>Верно ли, что X < Y?</p>
В чём проблема?
?
X < Y
это начало тэга?
22 слайд
Маркированные списки
22
<ul>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ul>
unordered list
(неупорядоченный список)
list item
(элемент списка)
изменение маркера:
<ul type="disk">
...
</ul>
disk
circle ○
square ■
23 слайд
Нумерованные списки
23
<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>
ordered list
(упорядоченный список)
изменение нумерации:
<ol type="i" start="4">
...
</ol>
1, i, I, a, A
24 слайд
Многоуровневые списки
24
<ol>
<li>Россия
</li>
<li>Украина
</li>
</ol>
<ul>
<li>Москва</li>
<li>Санкт-Петербург</li>
</ul>
<ul>
<li>Киев</li>
<li>Одесса</li>
</ul>
25 слайд
Гиперссылки (локальные)
25
Переход на
<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>.
26 слайд
Гиперссылки (внешние)
26
<a href="http://example.net/news/info.htm">
Информация</a>.
на URL:
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:vasya@mail.ru">
Напишите мне!</a>
27 слайд
Как записать гиперссылки от show.htm?
27
main
index.htm
goods.htm
goods
food
food.htm
show
show.htm
history
hist.htm
before
before.htm
28 слайд
Метки внутри документов
28
Там в лесу живет
<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>
29 слайд
Куда переход?
29
<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:john@yahoo.com">...</a>
30 слайд
Оформление документов
30
Создание веб-сайтов
31 слайд
оформление
Содержание и оформление
31
содержание (контент)
Веб-страница:
содержание
оформление
<h1>Сборник задач по физике</h1>
<p class="author">Григорий Остер</p>
<h2>Задача 61</h2>
Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.
логическая разметка
(*.html)
физическая разметка
(*.css)
32 слайд
Логическая разметка (HTML)
32
Выделение (emphasize):
<em>Вася</em>
Сильное выделение (strong):
<strong>Вася</strong>
Программный код (code):
<code>a:=b+c;</code>
Определение (definition):
<dfn>Информация</dfn> — это...
Цитата (citation):
<cite>Карету мне, карету!</cite>
Сокращение (abbreviation):
<abbr>НИИЧАВО</abbr>
33 слайд
Оформление текстов программ
33
<pre>
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
</pre>
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
preformatted (уже отформатированный)
34 слайд
Тэги физической разметки HTML
34
Курсив (italic):
<i>Вася</i>
Вася
Жирный (bold):
<b>Вася</b>
Вася
Подчёркивание (underline):
<u>Вася</u>
Вася
Зачёркивание (strikeout):
<s>Вася</s>
Вася
Верхний индекс (superscript):
Вася<sup>2</sup>
Вася2
Нижний индекс (subscript):
Вася<sub>2</sub>
Вася2
35 слайд
Стилевые файлы
35
содержание
оформление
<h1>Рекурсия</h1>
У попа была собака, он её любил,
Она съела кусок мяса, он её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...
main.css
mob.css
printer.css
CSS (Cascading Style Sheets) – каскадные таблицы стилей.
36 слайд
Стилевые файлы
36
body {
color: white;
background: #FF6600;
}
название тэга
свойство
селектор
color – цвет символов
background – цвет фона
test.css
значение
R = FF16 = 255
G = 6616 = 102
B = 0
37 слайд
Подключение стилевого файла
37
<html>
<head>
<title>Страница с файлом стилей</title>
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
Привет, Вася!
</body>
</html>
qq.html
test.css
body {
color: white;
background: #0000E0;
}
таблица стилей
тип данных MIME
Multipurpose Internet Mail Extension
38 слайд
Наследование стилей
38
<body>
Привет, Вася!
<p>Петя, тебе тоже привет!</p>
</body>
body {
color: white;
background: #0000E0;
}
наследуется
не наследуется
(прозрачный фон)
39 слайд
Стили для элементов: шрифты
39
p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
для всех абзацев
семейство шрифтов
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
размер в пикселях
normal – обычный
italic - курсив
normal – обычный
bold - жирный
40 слайд
Стили: размеры, выравнивание
40
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.
выравнивание:
left
center
right
justify
100px
80%
20px
цвет фона
абзацный отступ
41 слайд
Рамка, поля, отступы
41
p {
background: #ccffcc;
border: 1px solid green;
margin: 0 40px 20px 40px;
padding: 5px;
}
рамка
отступы снаружи
отступы внутри
сверху, справа, снизу, слева
со всех сторон
толщина
solid – сплошная
dashed - штриховая
dotted – точечная
цвет
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.
40px
40px
5px
20px
42 слайд
Рамка, поля и отступы
42
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.
margin-right
margin-bottom
margin-left
margin-top
padding-right
padding-left
padding-top
padding-bottom
border-right
border-left
border-top
border-bottom
43 слайд
Стили гиперссылок
43
a {
color: green;
text-decoration: none;
}
Все гиперссылки:
a:visited { color: #0000AA; }
Посещённые гиперссылки:
a:hover {
color: red;
text-decoration: underline;
}
Гиперссылки при наведении мыши:
убрать подчёркивание
псевдокласс
псевдокласс
подчёркивание
44 слайд
Классы
44
<p class="error">Ошибка!
Что-то с памятью.
</p>
p.error {
background:red;
}
для абзацев класса error
p {
background:blue;
color:white;
}
каскад!
Более конкретное указание отменяет более общее!
!
45 слайд
Классы
45
.error {
background:red;
color:white;
}
для всех элементов класса error
<p>
<span class="error">Ошибка!</span>
Что-то с памятью.
</p>
элемент в тексте
46 слайд
Фоновый рисунок
46
p.hallo {
background: white url(images/grad.jpg);
}
<p class="hallo">
Привет, Вася!
</p>
Привет, Вася!
p.hallo {
background: url(grad.jpg) repeat-y;
}
Привет, Вася!
47 слайд
Фоновый рисунок без повторения
47
p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}
<p class="email">
<a href="mailto:qq@mail.ru">qq@mail.ru</a>
</p>
qq@mail.ru
qq@mail.ru
20px
48 слайд
Составные селекторы
48
code, pre {
font-weight: bold;
font-family: Courier New, monospace;
}
Общие свойства для нескольких тэгов:
em a {
font-style: normal;
}
Вложенные элементы:
a внутри em
49 слайд
Сложные селекторы
49
p.email a {
color: green;
text-decoration:none;
}
p.email a:hover {
color: #00F;
text-decoration:underline;
}
p.email a:visited {
color: #F0F;
}
ссылки внутри абзаца класса email
убрать подчеркивание
посещённые ссылки
подчеркнуть
мышь над ссылкой
то же, что #FF00FF
50 слайд
Рисунки
50
Создание веб-сайтов
51 слайд
Форматы рисунков
51
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)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
52 слайд
Форматы рисунков
52
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>
53 слайд
Рисунки в документе
53
<img src="night.jpg">
<img src="images/night.jpg">
<img src="../../images/night.jpg">
<img src="http://example.com/img/night.jpg">
из той же папки:
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)
54 слайд
Выравнивание
54
<img src="flag.jpg" align="left">
left
right
top
bottom
(по умолчанию)
middle
55 слайд
Отступы
55
<img src="net.jpg"
align="left">
<img src="net.jpg"
align="left"
hspace="10"
vspace="10">
vspace
(vertical space)
hspace
(horizontal space)
56 слайд
Другие атрибуты
56
<img src="night.jpg"
alt="Ночь на Ладоге"
width="800"
height="600">
надпись на месте рисунка, если его нет
всплывающая подсказка
размеры позволяют:
растянуть – сжать
не портить дизайн, если рисунка нет
57 слайд
Рисунок-гиперссылка
57
<a href="http://www.mail.ru">
<img src="mailru.jpg"
alt="Бесплатная почта" border="0"></a>
<a href="gallery.htm">
<img src="night.jpg" border="0">
</a>
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка вокруг
если </a> не вплотную к <img …>, будет «хвост»
не будет «хвоста»
58 слайд
Вставка векторных рисунков
58
<object type="image/svg+xml"
data="test.svg"
width="48" height="48"
align="left">
</object>
тип нестандартных данных
имя файла
размеры
выравнивание
59 слайд
Фоновый рисунок
59
body {
background: url(grad.jpg);
}
body {
background: url(grad.jpg) #EEE;
}
'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'
если рисунка нет…
60 слайд
Фоновый рисунок
60
body{ background: url(grad.jpg) no-repeat; }
body{ background: url(grad.jpg) repeat-y; }
если рисунок меньше, он повторяется
не повторять
повторять по вертикали
61 слайд
Фоновый рисунок
61
Не должно быть «швов»!
!
Фон не должен мешать чтению!
!
62 слайд
Мультимедиа
62
Создание веб-сайтов
63 слайд
Вставка мультимедийных файлов
63
<embed src="myaw.wav"
autostart="false"></embed>
имя файла
автозапуск
Звуковой файл:
Флэш-анимация:
<embed src="cube.swf"
width="275" height="200">
</embed>
имя файла
размеры
64 слайд
Вставка мультимедийных файлов
64
<embed src="http://www.youtube.com/v/YvLNA5OW6xZ"
width="425" height="350">
</embed>
адрес ролика
Видео:
размеры
65 слайд
HTML5 – тэг audio
65
<audio
src="nature.ogg"
autostart="false"
controls="controls"
width="425"
height="350">
</audio>
имя файла
показывать элементы управления
размеры
66 слайд
HTML5 – тэг video
66
<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>
67 слайд
Таблицы
67
Создание веб-сайтов
68 слайд
Простые таблицы
68
<table border="1">
. . .
</table>
толщина рамки
<table border="1">
<tr>
<td>Вася</td>
<td>Петров</td>
</tr>
</table>
table row
(строка)
table data
(ячейка с данными)
69 слайд
Заголовки таблиц
69
<table border="1">
<tr>
<th>месяц</th>
</tr>
<tr>
<td>январь</td>
</tr>
<tr>
<td>февраль</td>
</tr>
<tr>
<td>март</td>
</tr>
</table>
table header
(заголовок)
жирный, по центру
70 слайд
Объединение ячеек – столбцы
70
<table border="1">
<tr>
<th colspan="3">месяц</th>
</tr>
<tr>
<td>январь</td>
<td>февраль</td>
<td>март</td>
</tr>
</table>
column span
(охват столбцов)
71 слайд
Объединение ячеек – строки
71
<table border="1">
<tr>
<th rowspan="3">Привет,</th>
<td>Вася!</td>
</tr>
<tr>
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>
row span
(охват строк)
72 слайд
Табличная вёрстка
72
<table>
<tr>
<td>
</td>
<td>Самая большая страна
Западной Европы.</td>
</tr>
</table>
<table border="1">
<tr>
<th>Франция</th>
<td>Париж</td>
</tr>
</table>
скрытая таблица!
73 слайд
Вложенные таблицы
73
<table border="0" cellspacing=10>
<tr><td>
</td>
<td>
</td></tr>
</table>
<table border="1">
<tr><td>Вася</td><td>Петя</td></tr>
<tr><td>Маша</td><td>Даша</td></tr>
</table>
<table border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>333</td><td>4444</td></tr>
</table>
74 слайд
Размеры
74
<table width="60%" height="300">
...
</table>
ширина в пикселях или в % от ширины окна браузера
высота в пикселях
<tr height="50">
...
</tr>
всей таблицы:
строки:
ячейки:
<td width="25%" height="50">
...
</td>
ширина в пикселях или в % от ширины таблицы
75 слайд
Размеры (через CSS)
75
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
<table class="spec">
...
</table>
76 слайд
Выравнивание
76
<table border="1">
<tr align="center"
valign="top">
<td width="120">по центру,
по верхней границе</td>
<td align="right" valign="middle"
width="200">по правой границе,
по середине</td>
</tr>
</table>
<table align="center">
...
</table>
всей таблицы:
информации в ячейках:
left,
center,
right
left,
center,
right
top,
middle,
bottom
77 слайд
Выравнивание (через CSS)
77
<table class="ex" border="1">
<tr class="centop">
<td>По центру,
по верхней границе</td>
<td class="rmid">По правой
границе, по середине</td>
</tr>
</table>
table.ex tr.centop {
text-align: center;
vertical-align: top;
height:100px;
}
table.ex td.rmid {
text-align: right;
vertical-align: middle;
width:200px;
}
left,
center,
right
top,
middle,
bottom
78 слайд
Фон и цвет текста (через CSS)
78
<table border="1" class="qq">
<tr class="spec">
<td>Привет!</td>
<td class="r"></td>
</tr>
<tr>
<td class="pic">
Таблица
из двух строк</td>
<td>и двух столбцов</td>
</tr>
</table>
table.qq td {
background: green;
}
table.qq tr.spec td {
background: blue;
color: white;
}
table.qq tr.spec td.r {
background: red;
}
table.qq td.pic {
background: url("web.jpg");
}
цвет фона
рисунок
79 слайд
Отступы
79
<table cellspacing = "10" cellpadding = "10"
bgcolor = blue>
<tr bgcolor = white>
<td width = "100">1</td>
<td width = "100">2</td>
</tr>
</table>
интервал между ячейками
отступ внутри ячеек
cellspacing
cellspacing
cellpadding
cellpadding
80 слайд
Отступы (через CSS)
80
<table id="qq">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
border-spacing
border-spacing
padding
padding
table#qq {
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
}
#qq tr {
background: white;
}
кроме IE 6
идентификатор – уникальное имя
81 слайд
Блоки
81
Создание веб-сайтов
82 слайд
Что такое блок (div)?
82
<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
83 слайд
Рамка, поля и отступы
83
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.
margin-right
margin-bottom
margin-left
margin-top
padding-right
padding-left
padding-top
padding-bottom
border-right
border-left
border-top
border-bottom
84 слайд
Стили для блоков
84
<div class="info" id="result">
Ответ: 45.
</div>
идентификатор (уникальный!)
.info {
margin: 5px 5px 10px 20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}
85 слайд
«Плавающий» блок
85
<div class="picture">
<img src="dog.jpg"
width="100"
height="66">
<p>На природе</p>
</div>
.picture { float:left; margin: 5px; }
.picture p {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}
div
86 слайд
Динамический HTML
86
Создание веб-сайтов
87 слайд
Что такое DHTML?
87
Динамический 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
title
DOM
body
em
Привет,
p
Вася!
88 слайд
«Живой» рисунок
88
box_closed.gif
box_opened.gif
<img src="box_closed.gif"
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">
this.src='box_opened.gif'
свойство src этого объекта
вложенные кавычки
обработчик события (Javascript)
89 слайд
Скрытый блок
89
ЛКМ
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.
</div>
.hidden {
display:none;
}
не показывать
Зачем нужен id?
?
block – во всю ширину
inline – в тексте
90 слайд
Javascript-файл
90
Файл test.js
function show ( name )
{
var elem = document.getElementById(name);
if ( elem )
elem.style.display = "block";
}
найти элемент по id
функция
имя функции
переменная
если нашли
изменить свойство display
block – во всю ширину
inline – в тексте
none – не показывать
91 слайд
Подключение Javascript-файла
91
<head>
<script type="text/javascript"
src="test.js"></script>
...
</head>
тип файла
имя файла
92 слайд
Вызов функции
92
<a href="#"
onClick="show('details');return false;">
Показать детали
</a>
ссылка на эту страницу
дальнейшая обработка (переход по ссылке) не нужна
по щелчку вызвать функцию
93 слайд
HTML-файл
93
<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>
</body>
</html>
<div id="details" class="hidden">
Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>
Как сделать два скрытых блока?
?
94 слайд
Формы
94
<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>
форма – набор элементов диалога
поле ввода
кнопка
текст на кнопке
что делать при щелчке
95 слайд
Формы
95
<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
введённый текст
96 слайд
XML и XHTML
96
Создание веб-сайтов
97 слайд
В чём проблема?
97
Интеграция (объединение) информационных систем
А
В
Б
обмен данными
В каком формате?
?
Двоичные файлы:
небольшой объём
множество форматов, приёмник должен суметь прочитать файл
98 слайд
В чём проблема?
98
Задачи:
универсальный формат
текстовая форма
понятен человеку при просмотре
только содержание (без оформления)
сохранение структуры (главы, разделы)
автоматическая обработка
HTML:
содержит тэги физической разметки
нельзя вводить новые тэги
нестрогий синтаксис (можно не закрывать <p>)
99 слайд
Что такое XML?
99
<?xml version="1.0"?>
<компьютер>
<процессор частота="2 ГГц">Intel Celeron
</процессор>
<память фирма="Kingston">2048 Мб</память>
<винчестер фирма="Seagate">320 Гб
</винчестер>
<периферия>
<монитор>Philips 190C1SB</монитор>
<клавиатура>Logitech Classic 200
</клавиатура>
<мышь>Genius Navigator 600</мышь>
</периферия>
</компьютер>
100 слайд
Что такое XML?
100
XML = eXtensible Markup Language
(расширяемый язык разметки)
тэги-контейнеры в угловых скобках
<тэг>... </тэг>
атрибуты тэгов (дополнительные данные)
<тэг атрибут="значение">... </тэг>
можно вводить новые тэги
нет никаких тэгов оформления, только данные
в контейнер могут быть вложены другие контейнеры
иерархия – дерево!
Это иерархическая база данных!
!
101 слайд
документы Microsoft Office и OpenOffice.org:
набор XML-файлов zip-архив
RSS (ленты новостей на сайтах и в блогах)
MathML (описание математических формул)
SVG (векторная графика на веб-страницах)
файлы настроек (конфигурации) программ
электронные книги .fb2
XAML – язык описания интерфейсов в Windows 8
Использование XML
101
102 слайд
XML: «за» и «против»
102
открытый текстовый формат
не зависит от ОС и ПО
строгие правила, стандарты легко обрабатывать в программах
удобен для многоуровневых списков и иерархических БД
сложно описать структуры, отличающиеся от иерархии (графы)
не различаются типы данных (число, текст, дата, время, логическое значение)
большой объем файлов
103 слайд
XHTML
103
Задача: автоматическая обработка веб-страниц
HTML:
нестрогий синтаксис (можно не закрывать <p>)
не различаются заглавные и строчные буквы
XHTML = eXtensible Hypertext Markup Language
имена тегов и атрибутов – только строчные буквы
все тэги должны быть закрыты (например, <br />)
правильная вложенность тэгов
значения атрибутов в кавычках
замена служебных символов:
«<» «<» «&» «&»
HTML
XHTML
<p><strong>Вася</p></strong>
<img src="dog.jpg" alt="Пес Барбос" />
104 слайд
Размещение веб-сайтов
104
Создание веб-сайтов
105 слайд
Как разместить сайт?
105
На своём компьютере:
постоянно включенный компьютер
стабильный скоростной канал связи
«белый» IP-адрес;
установка и настройка веб-сервера
защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно
106 слайд
Что такое хостинг?
106
Хостинг — услуга по размещению сайта (данных) на постоянно работающем сервере.
Тарифный план стоимость
ограничение объема данных (файлов и почты)
ограничение трафика
ежедневно: 100 пользователей
10 страниц по 100 Кбайт
в месяц: 3 Гбайт
поддержка баз данных (да/нет/количество)
поддержка серверных скриптов (PHP)
100 Мбайт
Бесплатные хостинги
ucoz.ru
webservis.ru
www.hostinger.ru
www.holm.ru
www.hut.ru
wallst.ru
оплата – реклама
107 слайд
Типы хостинга
107
Виртуальный хостинг
Виртуальный частный сервер
Выделенный сервер
до 1000 сайтов
garage.ru
toy.com
vobla.net
…
копирование файлов в каталог
ПО хостера
garage.ru
toy.com
vobla.net
виртуальная машина для каждого сайта
ПО хозяина сайта
vobla.net
отдельный компьютер для сайта
ПО хозяина сайта
108 слайд
Доменные имена
108
IP-адреса: 94.100.101.202
Доменные имена: www.mail.ru
Как зарегистрировать?
?
nic.ru
(RU-CENTER)
Бесплатно (3-й уровень): vasya.ucoz.ru
DNS-сервер
109 слайд
Загрузка файлов на сайт
109
создание страниц в конструкторе: *.ucoz.ru
FTP
локальный
компьютер
каталог на сайте
пароль
логин
сайт
FileZilla (filezilla-project.org)
110 слайд
Конец фильма
110
ПОЛЯКОВ Константин Юрьевич
д.т.н., учитель информатики
ГБОУ СОШ № 163, г. Санкт-Петербург
kpolyakov@mail.ru
ЕРЕМИН Евгений Александрович
к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь
eremin@pspu.ac.ru
111 слайд
Источники иллюстраций
111
www.kkfreight.ru
www.foru.ru
www.ibizsys.com
ru.wikipedia.org
иллюстрации художников издательства «Бином»
авторские материалы
Рабочие листы
к вашим урокам
Скачать
6 626 245 материалов в базе
«Информатика. Углубленный уровень (в2 частях)», Поляков К.Ю., Еремин Е.А.
Глава 4. Создание веб-сайтов
Больше материалов по этой темеНастоящий материал опубликован пользователем Воронина Марина Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материалВаша скидка на курсы
40%Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
600 ч.
Курс профессиональной переподготовки
300/600 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.