Инфоурок Информатика ПрезентацииТематический модуль по информатике "Web-конструирование"

Тематический модуль по информатике "Web-конструирование"

Скачать материал
Скачать материал "Тематический модуль по информатике "Web-конструирование""

Получите профессию

Менеджер по туризму

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Директор детского оздоровительного лагеря

Описание презентации по отдельным слайдам:

  • 1WEB-конструирование

    1 слайд

    1
    WEB-конструирование

  • Веб-сайты и веб-страницы
Текстовые веб-страницы
Оформление документов
Рисунки...

    2 слайд

    Веб-сайты и веб-страницы
    Текстовые веб-страницы
    Оформление документов
    Рисунки
    Мультимедиа
    Таблицы
    Блоки
    Динамический HTML
    XML и XHTML
    Размещение веб-сайтов




    2
    Содержание

  • Веб-сайты и веб-страницы 3Создание веб-сайтов

    3 слайд

    Веб-сайты и веб-страницы
    3
    Создание веб-сайтов

  • Основные определения4Гипертекст (англ. hypertext) – это текст, содержащий гип...

    4 слайд

    Основные определения
    4
    Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки.
    Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.).
    Веб-страница – это гипертекстовый документ в Интернете.
    Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками.
    Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб-страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы).
    Браузер – это программа для просмотра веб-страниц на экране монитора.

  • Что такое веб-страница?5Lorem ipsum dolor sit amet, consectetur adipiscing el...

    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статические – готовые файлы *.htm,  *.html




дин...

    6 слайд

    Какие бывают веб-страницы?
    6
    статические – готовые файлы *.htm, *.html




    динамические – полностью или частично
    создаются на сервере в момент запроса
    *.php, *.asp, *.pl, *.cgi, *.shtml …
    быстро загружаются
    почти не нагружают сервер
    невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)
    работа с базами данных
    загружаются медленнее
    дополнительная нагрузка на сервер

  • Системы управления сайтами7CMS = Content Management System, система управлени...

    7 слайд

    Системы управления сайтами
    7
    CMS = Content Management System, система управления содержимым сайта.
    Функции:
    создание разделов сайта
    создание страниц
    база данных пользователей
    управление доступом
    обеспечение навигации и поиска
    Не нужно знать HTML!
    !
    1c-bitrix.ru
    Joomla!
    joomla.org
    Drupal
    drupal.org
    ucoz.ru
    wordpress.org
    бесплатно!

  • Интерактивные страницы8DHTML = Dynamic HTML, динамический HTML. Скрипт или сц...

    8 слайд

    Интерактивные страницы
    8
    DHTML = Dynamic HTML, динамический HTML.
    Скрипт или сценарий (англ. script) – это программный код для автоматизации действий пользователя.
    Javascript
    замена текста, оформления, рисунков
    многоуровневые выпадающие меню
    скрытие и показ частей страницы
    проверка данных, введенные пользователем
    выполнение вычислений
    игры…

  • Текстовые веб-страницы9Создание веб-сайтов

    9 слайд

    Текстовые веб-страницы
    9
    Создание веб-сайтов

  • Как создать веб-страницу?10Любой текстовый редактор (Блокнот и т.п.)2×ЛКМТекс...

    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

Тэг – команда языка HTMLоткрывающий тэгзакрывающий тэг...

    11 слайд

    Первая веб-страница
    11
    <html>

    </html>
    Тэг – команда языка HTML
    открывающий тэг
    закрывающий тэг
    <html>
    <head>
    <title>Первая страница</title>
    </head>
    <body>
    Привет!
    </body>
    </html>
    <head>
    <title>Первая страница</title>
    </head>
    <body>
    Привет!
    </body>
    контейнер (парный тэг)

  • Заголовки12заголовок документазаголовок раздела – заголовок документа
 – заго...

    12 слайд

    Заголовки
    12
    заголовок документа
    заголовок раздела
    <h1> – заголовок документа
    <h2> – заголовок раздела
    <h3> – заголовок подраздела
    <h4> – заголовок параграфа
    <h1>Глава 1. Информация</h1>
    <h2>1.1 Что такое информация?</h2>
    Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...

  • Выравнивание заголовков13Глава 1. Информацияleft, 
center, 
right атрибут (св...

    13 слайд

    Выравнивание заголовков
    13
    <h1 align="center">Глава 1. Информация</h1>
    left,
    center,
    right
    атрибут (свойство)

  • Абзацы (параграфы)14И вечный бой! Покой нам только снится
Сквозь кровь и пыль...

    14 слайд

    Абзацы (параграфы)
    14
    И вечный бой! Покой нам только снится
    Сквозь кровь и пыль...
    Летит, летит степная кобылица
    И мнёт ковыль...
    Браузер «проглатывает» переходы на новую строку!
    !

  • Абзацы (параграфы)15И вечный бой! Покой нам только снится
Сквозь кровь и пыль...

    15 слайд

    Абзацы (параграфы)
    15
    <p>И вечный бой! Покой нам только снится</p>
    <p>Сквозь кровь и пыль...</p>
    <p>Летит, летит степная кобылица </p>
    <p>И мнёт ковыль...</p>
    paragraph – абзац
    интервал

  • Выравнивание абзацев16
Молекула воды испарилась из кипящего чайника и, подлет...

    16 слайд

    Выравнивание абзацев
    16
    <p align="justify">
    Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как
    прокравшейся на кухню молекулой
    водорода. Кто быстрей отлетел?
    </p>
    left, center, right, justify
    Что плохо?
    ?
    Решение:
    align="left"

  • Переход на новую строку17И вечный бой! Покой нам только снится
Сквозь кровь и...

    17 слайд

    Переход на новую строку
    17
    И вечный бой! Покой нам только снится

    Сквозь кровь и пыль...

    Летит, летит степная кобылица

    И мнёт ковыль...
    break – разрыв

  • Специальные символы (HTML entities)18

    18 слайд

    Специальные символы (HTML entities)
    18

  • Применение специальных символов19Дом сдали в 2011&amp;nbsp;году. А.С.&amp;nbsp;Пушкин...

    19 слайд

    Применение специальных символов
    19
    Дом сдали в 2011&nbsp;году.
    А.С.&nbsp;Пушкин
    Пёс весил 12&nbsp;кг.
    Неразрывный пробел (&nbsp;)
    год
    инициалы
    единицы измерения
    Из дома вышел А.С. Пушкин – солнце
    русской поэзии.
    не отрывать:

  • Применение специальных символов20Вышел А.С.&amp;nbsp;Пушкин&amp;nbsp;&amp;mdash; солнце р...

    20 слайд

    Применение специальных символов
    20
    Вышел А.С.&nbsp;Пушкин&nbsp;&mdash; солнце русской поэзии.
    Длинное тире (&mdash;)
    Вышел А.С. Пушкин – солнце русской поэзии.
    не начинать строку с тире!
    Короткое тире (&ndash;)
    Дорога Васюки&ndash;Васютино строилась
    в 2007&ndash;2013&nbsp;годах.
    Что плохо?
    ?

  • Применение специальных символов21Угловые скобки (&amp;lt; &amp;gt;)Верно ли, что X &lt;...

    21 слайд

    Применение специальных символов
    21
    Угловые скобки (&lt; &gt;)
    <p>Верно ли, что X < Y?</p>
    В чём проблема?
    ?
    X &lt; Y
    это начало тэга?

  • Маркированные списки22
Вася    
Петя
Коля
unordered list (неупорядоченный сп...

    22 слайд

    Маркированные списки
    22
    <ul>
    <li>Вася</li>
    <li>Петя</li>
    <li>Коля</li>
    </ul>
    unordered list
    (неупорядоченный список)
    list item
    (элемент списка)
    изменение маркера:
    <ul type="disk">
    ...
    </ul>
    disk 
    circle ○
    square ■

  • Нумерованные списки23
Вася    
Петя
Коля
ordered list (упорядоченный список)...

    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 слайд

    Многоуровневые списки
    24
    <ol>
    <li>Россия




    </li>
    <li>Украина




    </li>
    </ol>
    <ul>
    <li>Москва</li>
    <li>Санкт-Петербург</li>
    </ul>
    <ul>
    <li>Киев</li>
    <li>Одесса</li>
    </ul>

  • Гиперссылки (локальные)25Переход на 
новую страницу.anchor 
(якорь) hyper ref...

    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
Информация.на URL:на главную страницу сайта:Информаци...

    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>

  • Как записать гиперссылки от show.htm?27mainindex.htmgoods.htmgoodsfoodfood.ht...

    27 слайд

    Как записать гиперссылки от show.htm?
    27
    main
    index.htm
    goods.htm
    goods
    food
    food.htm
    show
    show.htm
    history
    hist.htm
    before
    before.htm

  • Метки внутри документов28Там в лесу живет 
медведь.
...
...
...

Медведь
Медв...

    28 слайд

    Метки внутри документов
    28
    Там в лесу живет
    <a href="#bear">медведь</a>.
    ...
    ...
    ...
    <a name="bear"></a>
    <h2>Медведь</h2>
    Медведь&nbsp;&mdash; хищное млекопитающее семейства медвежьих.
    <a href="animals.htm#bear">медведь</a>
    на метку в другом файле:
    <a href="http://qq.net/a.htm#bear">медведь</a>

  • Куда переход?29...
...
... 
... 
...
...
...

    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 слайд

    Оформление документов
    30
    Создание веб-сайтов

  • оформлениеСодержание и оформление31содержание (контент)Веб-страница:содержани...

    31 слайд

    оформление
    Содержание и оформление
    31
    содержание (контент)
    Веб-страница:
    содержание
    оформление
    <h1>Сборник задач по физике</h1>
    <p class="author">Григорий Остер</p>
    <h2>Задача 61</h2>
    Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.
    логическая разметка
    (*.html)
    физическая разметка
    (*.css)

  • Логическая разметка (HTML)32Выделение (emphasize):ВасяСильное выделение (stro...

    32 слайд

    Логическая разметка (HTML)
    32
    Выделение (emphasize):
    <em>Вася</em>
    Сильное выделение (strong):
    <strong>Вася</strong>
    Программный код (code):
    <code>a:=b+c;</code>
    Определение (definition):
    <dfn>Информация</dfn> &mdash; это...
    Цитата (citation):
    <cite>Карету мне, карету!</cite>
    Сокращение (abbreviation):
    <abbr>НИИЧАВО</abbr>

  • Оформление текстов программ33
iMin := 1;
for i:=2 to n do
  if a[i] &lt; a[iMin]...

    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 (уже отформатированный)

  • Тэги физической разметки HTML34Курсив (italic):ВасяВасяЖирный (bold):ВасяВася...

    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 слайд

    Стилевые файлы
    35
    содержание
    оформление
    <h1>Рекурсия</h1>
    У попа была собака, он её любил,
    Она съела кусок мяса, он её убил,
    В землю закопал,
    Надпись написал:
    У попа была собака, он её любил,
    ...
    main.css
    mob.css
    printer.css
    CSS (Cascading Style Sheets) – каскадные таблицы стилей.

  • Стилевые файлы36body {
  color: white;
  background: #FF6600;
}название тэгас...

    36 слайд

    Стилевые файлы
    36
    body {
    color: white;
    background: #FF6600;
    }
    название тэга
    свойство
    селектор
    color – цвет символов
    background – цвет фона
    test.css
    значение
    R = FF16 = 255
    G = 6616 = 102
    B = 0

  • Подключение стилевого файла37

Страница с файлом стилей



Привет, Вася!


qq...

    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
Привет, Вася!
Петя, тебе тоже привет!
body {
  color: w...

    38 слайд

    Наследование стилей
    38
    <body>
    Привет, Вася!
    <p>Петя, тебе тоже привет!</p>
    </body>
    body {
    color: white;
    background: #0000E0;
    }
    наследуется
    не наследуется
    (прозрачный фон)

  • Стили для элементов: шрифты39p {
 font-family: Arial,sans-serif;
 font-size:...

    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 - жирный

  • Стили: размеры, выравнивание40p {
 background: #E6E6FF;
 width: 80%;
 height:...

    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
    цвет фона
    абзацный отступ

  • Рамка, поля, отступы41p {
 background: #ccffcc;
 border: 1px solid green;
 ma...

    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

  • Рамка, поля и отступы42Lorem ipsum dolor sit amet, consectetur adipiscing eli...

    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

  • Стили гиперссылок43a { 
  color: green;
  text-decoration: none; 
}Все гиперс...

    43 слайд

    Стили гиперссылок
    43
    a {
    color: green;
    text-decoration: none;
    }
    Все гиперссылки:
    a:visited { color: #0000AA; }
    Посещённые гиперссылки:
    a:hover {
    color: red;
    text-decoration: underline;
    }
    Гиперссылки при наведении мыши:
    убрать подчёркивание
    псевдокласс
    псевдокласс
    подчёркивание

  • Классы44Ошибка! 
Что-то с памятью.
p.error {
  background:red;
}для абзацев к...

    44 слайд

    Классы
    44
    <p class="error">Ошибка!
    Что-то с памятью.
    </p>
    p.error {
    background:red;
    }
    для абзацев класса error
    p {
    background:blue;
    color:white;
    }
    каскад!
    Более конкретное указание отменяет более общее!
    !

  • Классы45.error {
  background:red;
  color:white;
}для всех элементов класса...

    45 слайд

    Классы
    45
    .error {
    background:red;
    color:white;
    }
    для всех элементов класса error
    <p>
    <span class="error">Ошибка!</span>
    Что-то с памятью.
    </p>
    элемент в тексте

  • Фоновый рисунок46p.hallo {
 background: white url(images/grad.jpg);
}
Привет,...

    46 слайд

    Фоновый рисунок
    46
    p.hallo {
    background: white url(images/grad.jpg);
    }
    <p class="hallo">
    Привет, Вася!
    </p>
    Привет, Вася!
    p.hallo {
    background: url(grad.jpg) repeat-y;
    }
    Привет, Вася!

  • Фоновый рисунок без повторения47p.email {
  background: url(letter.gif) no-re...

    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

  • Составные селекторы 48code, pre {
  font-weight: bold;
  font-family: Courier...

    48 слайд

    Составные селекторы
    48
    code, pre {
    font-weight: bold;
    font-family: Courier New, monospace;
    }
    Общие свойства для нескольких тэгов:
    em a {
    font-style: normal;
    }
    Вложенные элементы:
    a внутри em

  • Сложные селекторы49p.email a {
  color: green;
  text-decoration:none;
}p.ema...

    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 слайд

    Рисунки
    50
    Создание веб-сайтов

  • Форматы рисунков51GIF (Graphic Interchange Format)
сжатие без потерь (LZW)
пр...

    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)
    прозрачность и полупрозрачность (альфа-канал)
    нет анимации
    плохо сжимает мелкие рисунки

  • Форматы рисунков52SVG (Scalable Vector Graphics, масштабируемые           ве...

    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    из той же папки:из другой папки:с другого сервера:im...

    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 leftrighttopbottom
(по умолчанию)middle

    54 слайд

    Выравнивание
    54
    <img src="flag.jpg" align="left">
    left
    right
    top
    bottom
    (по умолчанию)
    middle

  • Отступы55  vspace
(vertical space)hspace
(horizontal space)

    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 слайд

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

  • Рисунок-гиперссылка57


локальная ссылка:ссылка на другой сервер:иначе будет...

    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 слайд

    Вставка векторных рисунков
    58
    <object type="image/svg+xml"
    data="test.svg"
    width="48" height="48"
    align="left">
    </object>
    тип нестандартных данных
    имя файла
    размеры
    выравнивание

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

    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'
    если рисунка нет…

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

    60 слайд

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

  • Фоновый рисунок61   Не должно быть «швов»!!   Фон не должен мешать чтению!!

    61 слайд

    Фоновый рисунок
    61
    Не должно быть «швов»!
    !
    Фон не должен мешать чтению!
    !

  • Мультимедиа62Создание веб-сайтов

    62 слайд

    Мультимедиа
    62
    Создание веб-сайтов

  • Вставка мультимедийных файлов63имя файлаавтозапускЗвуковой файл:Флэш-анимация...

    63 слайд

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

  • Вставка мультимедийных файлов64
адрес роликаВидео:размеры

    64 слайд

    Вставка мультимедийных файлов
    64
    <embed src="http://www.youtube.com/v/YvLNA5OW6xZ"
    width="425" height="350">
    </embed>
    адрес ролика
    Видео:
    размеры

  • HTML5 – тэг audio65
имя файлапоказывать элементы управленияразмеры

    65 слайд

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

  • HTML5 – тэг video66
Ваш браузер не поддерживает элемент video.

    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 слайд

    Таблицы
    67
    Создание веб-сайтов

  • Простые таблицы68
. . .
толщина рамки

  Вася
  Петров

table row 
(строка)ta...

    68 слайд

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

  • Заголовки таблиц69

  месяц


  январь


  февраль


  март

table header 
(з...

    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

  месяц


  январь
  февраль
  март

column sp...

    70 слайд

    Объединение ячеек – столбцы
    70
    <table border="1">
    <tr>
    <th colspan="3">месяц</th>
    </tr>
    <tr>
    <td>январь</td>
    <td>февраль</td>
    <td>март</td>
    </tr>
    </table>
    column span
    (охват столбцов)

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

  Привет,
  Вася!


  Петя!


  Коля!

row 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 слайд

    Табличная вёрстка
    72
    <table>
    <tr>
    <td>






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

  • Вложенные таблицы73

   






   
 




 
   ВасяПетя
   МашаДаша

   122...

    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 слайд

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

  • Размеры (через CSS)75table.spec {
  width: 60%;
  height: 300;
}table.spec tr...

    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 слайд

    Выравнивание
    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

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

   По центру, 
       по верхней границе
   По пр...

    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

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

  Привет!
  


 
 Таблица 
 из двух строк
 и...

    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

   1
   2

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

    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

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

    1 
    2 

border-spacingborder-spacingpaddingpadd...

    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 слайд

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

  • Что такое блок (div)?82
...




...свойства блока:Lorem ipsum dolor sit amet,...

    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

  • Рамка, поля и отступы83Lorem ipsum dolor sit amet, consectetur adipiscing eli...

    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
Ответ: 45.
идентификатор (уникальный!).info {
  margin: 5p...

    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
  
  На природе
.picture { float:left; margin: 5px; }
.pic...

    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

  • Динамический HTML86Создание веб-сайтов

    86 слайд

    Динамический HTML
    86
    Создание веб-сайтов

  • Что такое DHTML?87Динамический HTML (DHTML) – это технология создания интерак...

    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
    Вася!

  • «Живой» рисунок88box_closed.gifbox_opened.gifthis.src=&#039;box_opened.gif&#039;свойств...

    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ЛКМ
Детали &amp;#151; это гайка, шайба, болт, винт, шуруп, гвоздь и...

    89 слайд

    Скрытый блок
    89
    ЛКМ
    <div id="details" class="hidden">
    Детали &#151; это гайка, шайба, болт, винт, шуруп, гвоздь и др.
    </div>
    .hidden {
    display:none;
    }
    не показывать
    Зачем нужен id?
    ?
    block – во всю ширину
    inline – в тексте

  • Javascript-файл90Файл test.js function show ( name )
{
  var elem = document....

    90 слайд

    Javascript-файл
    90
    Файл test.js
    function show ( name )
    {
    var elem = document.getElementById(name);
    if ( elem )
    elem.style.display = "block";
    }
    найти элемент по id
    функция
    имя функции
    переменная
    если нашли
    изменить свойство display
    block – во всю ширину
    inline – в тексте
    none – не показывать

  • Подключение Javascript-файла91
 
  ...
тип файлаимя файла

    91 слайд

    Подключение Javascript-файла
    91
    <head>
    <script type="text/javascript"
    src="test.js"></script>
    ...
    </head>
    тип файла
    имя файла

  • Вызов функции92
Показать детали
ссылка на эту страницудальнейшая обработка (п...

    92 слайд

    Вызов функции
    92
    <a href="#"
    onClick="show('details');return false;">
    Показать детали
    </a>
    ссылка на эту страницу
    дальнейшая обработка (переход по ссылке) не нужна
    по щелчку вызвать функцию

  • HTML-файл93

  Скрытый блок
  
  


 
  Показать детали







  Детали &amp;#151...

    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">
    Детали &#151; это гайка, шайба, болт, винт,
    шуруп, гвоздь и др.
    </div>
    Как сделать два скрытых блока?
    ?

  • Формы94
  
  
форма – набор элементов диалогаполе вводакнопкатекст на кнопкеч...

    94 слайд

    Формы
    94
    <form name="calc">
    <input name="answer">
    <input type="button"
    value="Готово"
    onClick="check();">
    </form>
    форма – набор элементов диалога
    поле ввода
    кнопка
    текст на кнопке
    что делать при щелчке

  • Формы95
  
  
function check()
{
if ( calc.answer.value == &quot;4&quot; )
     alert(&quot;...

    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
    введённый текст

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

    96 слайд

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

  • В чём проблема?97Интеграция (объединение) информационных системАВБобмен данны...

    97 слайд

    В чём проблема?
    97
    Интеграция (объединение) информационных систем
    А
    В
    Б
    обмен данными
    В каком формате?
    ?
    Двоичные файлы:
    небольшой объём
    множество форматов, приёмник должен суметь прочитать файл

  • В чём проблема?98Задачи:универсальный формат
текстовая форма
понятен человеку...

    98 слайд

    В чём проблема?
    98
    Задачи:
    универсальный формат
    текстовая форма
    понятен человеку при просмотре
    только содержание (без оформления)
    сохранение структуры (главы, разделы)
    автоматическая обработка
    HTML:
    содержит тэги физической разметки
    нельзя вводить новые тэги
    нестрогий синтаксис (можно не закрывать <p>)

  • Что такое XML?99

  Intel Celeron
  
  2048 Мб
  320 Гб
  
  
     Philips 19...

    99 слайд

    Что такое XML?
    99
    <?xml version="1.0"?>
    <компьютер>
    <процессор частота="2 ГГц">Intel Celeron
    </процессор>
    <память фирма="Kingston">2048 Мб</память>
    <винчестер фирма="Seagate">320 Гб
    </винчестер>
    <периферия>
    <монитор>Philips 190C1SB</монитор>
    <клавиатура>Logitech Classic 200
    </клавиатура>
    <мышь>Genius Navigator 600</мышь>
    </периферия>
    </компьютер>

  • Что такое XML?100XML = eXtensible Markup Language 
            (расширяемый я...

    100 слайд

    Что такое XML?
    100
    XML = eXtensible Markup Language
    (расширяемый язык разметки)
    тэги-контейнеры в угловых скобках
    <тэг>... </тэг>
    атрибуты тэгов (дополнительные данные)
    <тэг атрибут="значение">... </тэг>
    можно вводить новые тэги
    нет никаких тэгов оформления, только данные
    в контейнер могут быть вложены другие контейнеры
    иерархия – дерево!
    Это иерархическая база данных!
    !

  • документы Microsoft Office и OpenOffice.org:
  набор XML-файлов  zip-архив
R...

    101 слайд

    документы Microsoft Office и OpenOffice.org:
    набор XML-файлов  zip-архив
    RSS (ленты новостей на сайтах и в блогах)
    MathML (описание математических формул)
    SVG (векторная графика на веб-страницах)
    файлы настроек (конфигурации) программ
    электронные книги .fb2
    XAML – язык описания интерфейсов в Windows 8
    Использование XML
    101

  • XML: «за» и «против»102открытый текстовый формат
не зависит от ОС и ПО
строги...

    102 слайд

    XML: «за» и «против»
    102
    открытый текстовый формат
    не зависит от ОС и ПО
    строгие правила, стандарты  легко обрабатывать в программах
    удобен для многоуровневых списков и иерархических БД
    сложно описать структуры, отличающиеся от иерархии (графы)
    не различаются типы данных (число, текст, дата, время, логическое значение)
    большой объем файлов

  • XHTML103Задача: автоматическая обработка веб-страницHTML:нестрогий синтаксис...

    103 слайд

    XHTML
    103
    Задача: автоматическая обработка веб-страниц
    HTML:
    нестрогий синтаксис (можно не закрывать <p>)
    не различаются заглавные и строчные буквы
    XHTML = eXtensible Hypertext Markup Language
    имена тегов и атрибутов – только строчные буквы
    все тэги должны быть закрыты (например, <br />)
    правильная вложенность тэгов

    значения атрибутов в кавычках

    замена служебных символов:
    «<»  «&lt;» «&»  «&amp;»
    HTML
    XHTML
    <p><strong>Вася</p></strong>
    <img src="dog.jpg" alt="Пес Барбос" />

  • Размещение веб-сайтов 104Создание веб-сайтов

    104 слайд

    Размещение веб-сайтов
    104
    Создание веб-сайтов

  • Как разместить сайт?105На своём компьютере:
постоянно включенный компьютер
ст...

    105 слайд

    Как разместить сайт?
    105
    На своём компьютере:
    постоянно включенный компьютер
    стабильный скоростной канал связи
    «белый» IP-адрес;
    установка и настройка веб-сервера
    защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно

  • Что такое хостинг?106Хостинг — услуга по размещению сайта (данных) на постоян...

    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 слайд

    Типы хостинга
    107
    Виртуальный хостинг
    Виртуальный частный сервер
    Выделенный сервер
    до 1000 сайтов
    garage.ru
    toy.com
    vobla.net

    копирование файлов в каталог
    ПО хостера
    garage.ru
    toy.com
    vobla.net
    виртуальная машина для каждого сайта
    ПО хозяина сайта
    vobla.net
    отдельный компьютер для сайта
    ПО хозяина сайта

  • Доменные имена108IP-адреса: 94.100.101.202Доменные имена: www.mail.ru  Как за...

    108 слайд

    Доменные имена
    108
    IP-адреса: 94.100.101.202
    Доменные имена: www.mail.ru
    Как зарегистрировать?
    ?
    nic.ru
    (RU-CENTER)
    Бесплатно (3-й уровень): vasya.ucoz.ru
    DNS-сервер

  • Загрузка файлов на сайт109создание страниц в конструкторе: *.ucoz.ru
FTPлокал...

    109 слайд

    Загрузка файлов на сайт
    109
    создание страниц в конструкторе: *.ucoz.ru
    FTP
    локальный
    компьютер
    каталог на сайте
    пароль
    логин
    сайт
    FileZilla (filezilla-project.org)

  • Конец фильма110ПОЛЯКОВ Константин Юрьевич
д.т.н., учитель информатики
ГБОУ СО...

    110 слайд

    Конец фильма
    110
    ПОЛЯКОВ Константин Юрьевич
    д.т.н., учитель информатики
    ГБОУ СОШ № 163, г. Санкт-Петербург
    kpolyakov@mail.ru
    ЕРЕМИН Евгений Александрович
    к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь
    eremin@pspu.ac.ru

  • Источники иллюстраций111www.kkfreight.ru
www.foru.ru
www.ibizsys.com 
ru.wiki...

    111 слайд

    Источники иллюстраций
    111
    www.kkfreight.ru
    www.foru.ru
    www.ibizsys.com
    ru.wikipedia.org
    иллюстрации художников издательства «Бином»
    авторские материалы

Получите профессию

Менеджер по туризму

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 626 245 материалов в базе

Материал подходит для УМК

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 12.02.2018 2157
    • PPTX 11.8 мбайт
    • 16 скачиваний
    • Оцените материал:
  • Настоящий материал опубликован пользователем Воронина Марина Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Воронина Марина Сергеевна
    Воронина Марина Сергеевна
    • На сайте: 6 лет и 1 месяц
    • Подписчики: 0
    • Всего просмотров: 25189
    • Всего материалов: 7

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Фитнес-тренер

Фитнес-тренер

500/1000 ч.

Подать заявку О курсе

Курс повышения квалификации

Специфика преподавания информатики в начальных классах с учетом ФГОС НОО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 40 человек из 20 регионов

Курс профессиональной переподготовки

Создание и обеспечение электронного архива с использованием информационно-коммуникационных технологий

Специалист по формированию электронного архива

600 ч.

9840 руб. 5900 руб.
Подать заявку О курсе
  • Сейчас обучается 29 человек из 21 региона

Курс профессиональной переподготовки

Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации

Преподаватель информационных технологий

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 188 человек из 53 регионов

Мини-курс

Современные инструменты инвестирования и управления затратами

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Художественная гимнастика: углубленная физическая подготовка

3 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Психология личности

5 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 33 человека из 22 регионов