К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 24. Веб-сайты и веб-страницы Веб-сайты и веб-страницы § 25. Текстовые веб-страницы Текстовые веб-страницы § 26. Оформление документов Оформление документов § 27. Рисунки Рисунки § 28. Мультимедиа Мультимедиа § 29. Таблицы Таблицы § 30. Блоки Блоки § 31. Динамический HTMLДинамический HTML § 32. XML и XHTMLXML и XHTML § 33. Размещение веб-сайтов Размещение веб-сайтов
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 24. Веб-сайты и веб-страницы 2
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Основные определения 3 Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки. Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.). Веб-страница – это гипертекстовый документ в Интернете. Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками. Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб- страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы). Браузер – это программа для просмотра веб-страниц на экране монитора.
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое веб-страница? 4 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.jpgtree.jpg image s media laugh.wavmovie.flv запрос на каждый файл! HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! !
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Какие бывают веб-страницы? 5 статические – готовые файлы *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса *.php, *.asp, *.pl, *.cgi, *.shtml … быстро загружаются почти не нагружают сервер невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0) работа с базами данных загружаются медленнее дополнительная нагрузка на сервер
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Системы управления сайтами 6 CMS = Content Management System, система управления содержимым сайта. Функции: создание разделов сайта создание страниц база данных пользователей управление доступом обеспечение навигации и поиска Не нужно знать HTML! ! 1c-bitrix.ru Joomla! joomla.org Drupal drupal.org ucoz.ru wordpress.org бесплатно!
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Интерактивные страницы 7 DHTML = Dynamic HTML, динамический HTML. Скрипт или сценарий (англ. script) – это программный код для автоматизации действий пользователя. Javascript замена текста, оформления, рисунков многоуровневые выпадающие меню скрытие и показ частей страницы проверка данных, введенные пользователем выполнение вычислений игры…
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 25. Текстовые веб-страницы 8
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Как создать веб-страницу? 9 Любой текстовый редактор (Блокнот и т.п.) 2×ЛКМ Текстовые редакторы с подсветкой HTML-тэгов: Sublime Text (sublimetext.com)sublimetext.com NotePad++ (notepad-plus-plus.org)notepad-plus-plus.org Bluefish (bluefish.openoffice.nl)bluefish.openoffice.nl HEFS (kpolyakov.spb.ru/prog/hefs.htm)kpolyakov.spb.ru/prog/hefs.htm Редакторы WYSIWYG = What You See Is What You Get TinyMCE ( Kompozer (kompozer.net)kompozer.net CKEditor (ckeditor.com)ckeditor.com openWYSIWYG ( BlueGriffon (bluegriffon.org)bluegriffon.org бесплатно!
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Первая веб-страница 10 Тэг – команда языка HTML открывающий тэг закрывающий тэг Первая страница Привет! Первая страница Привет! Первая страница Первая страница Привет! Привет! контейнер (парный тэг)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Заголовки 11 заголовок документа заголовок раздела – заголовок документа – заголовок раздела – заголовок подраздела – заголовок параграфа Глава 1. Информация 1.1 Что такое информация? Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена... Глава 1. Информация 1.1 Что такое информация? Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание заголовков 12 Глава 1. Информация left, center, right left, center, right атрибут (свойство)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Абзацы (параграфы) 13 И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... Браузер «проглатывает» переходы на новую строку! !
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Абзацы (параграфы) 14 И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... paragraph – абзац интервал
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание абзацев 15 Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как прокравшейся на кухню молекулой водорода. Кто быстрей отлетел? Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как прокравшейся на кухню молекулой водорода. Кто быстрей отлетел? left, center, right, justify Что плохо? ? Решение: align="left" Решение: align="left"
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Переход на новую строку 16 И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... break – разрыв
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Специальные символы (HTML entities) 17 Символ HTML-код Название неразрывный пробел – – короткое тире — (длинное) тире § § параграф « « левая русская кавычка » » правая русская кавычка < < левая угловая скобка > > правая угловая скобка © © символ авторского права ® ® зарегистрированная торговая марка ° ° градус ² ² квадрат ³ ³ куб × × знак умножения ÷ ÷ знак деления
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Применение специальных символов 18 Дом сдали в 2011 году. А.С. Пушкин Пёс весил 12 кг. Неразрывный пробел ( ) год инициалы единицы измерения Из дома вышел А.С. Пушкин – солнце русской поэзии. Из дома вышел А.С. Пушкин – солнце русской поэзии. не отрывать:
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Применение специальных символов 19 Вышел А.С. Пушкин — солнце русской поэзии. Длинное тире ( — ) Вышел А.С. Пушкин – солнце русской поэзии. не начинать строку с тире! Короткое тире ( – ) Дорога Васюки–Васютино строилась в 2007–2013 годах. Дорога Васюки–Васютино строилась в 2007–2013 годах. Что плохо? ?
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Применение специальных символов 20 Угловые скобки ( < > ) Верно ли, что X В чём проблема? ? X < Y это начало тэга?
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Маркированные списки 21 Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square disk circle square
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Нумерованные списки 22 Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Многоуровневые списки 23 Россия Украина Россия Украина Москва Санкт-Петербург Киев Одесса
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Гиперссылки (локальные) 24 Переход на новую страницу. Переход на новую страницу. anchor (якорь) anchor (якорь) hyper reference (гиперссылка) страница в том же каталоге: во вложенном каталоге: Информация. в родительском каталоге: Информация. в соседнем каталоге: Информация.
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Гиперссылки (внешние) 25 Информация. Информация. на URL: на главную страницу сайта: Информация. для скачивания архива: Скачать. Скачать. для запуска почтовой программы: Напишите мне!
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Как записать гиперссылки от show.htm ? 26 main index.htm goods.htm goods food food.htm show show.htm history hist.htm before before.htm
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Метки внутри документов 27 Там в лесу живет медведь.... Медведь Медведь — хищное млекопитающее семейства медвежьих. Там в лесу живет медведь.... Медведь Медведь — хищное млекопитающее семейства медвежьих. медведь на метку в другом файле: медведь
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Куда переход? 28...
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 26. Оформление документов 29
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, оформление Содержание и оформление 30 содержание (контент) Веб-страница: содержаниеоформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. логическая разметка ( *.html ) логическая разметка ( *.html ) физическая разметка ( *.css ) физическая разметка ( *.css )
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Логическая разметка (HTML) 31 Выделение (emphasize): Вася Сильное выделение (strong): Вася Программный код (code): a:=b+c; Определение (definition): Информация — это... Цитата (citation): Карету мне, карету! Сокращение (abbreviation): НИИЧАВО
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Оформление текстов программ 32 iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; preformatted (уже отформатированный)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Тэги физической разметки HTML 33 Курсив (italic): Вася Жирный (bold): Вася Подчёркивание (underline): Вася Зачёркивание (strikeout): Вася Верхний индекс (superscript): Вася 2 Нижний индекс (subscript): Вася 2
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стилевые файлы 34 содержание оформление Рекурсия У попа была собака, он её любил, Она съела кусок мяса, он её убил, В землю закопал, Надпись написал: У попа была собака, он её любил,... Рекурсия У попа была собака, он её любил, Она съела кусок мяса, он её убил, В землю закопал, Надпись написал: У попа была собака, он её любил,... main.css mob.css printer.css CSS (Cascading Style Sheets) – каскадные таблицы стилей.
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стилевые файлы 35 body { color: white; background: #FF6600; } body { color: white; background: #FF6600; } название тэга свойство селектор color – цвет символов background – цвет фона test.css значение R = FF 16 = 255 G = = 102 B = 0 R = FF 16 = 255 G = = 102 B = 0
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Подключение стилевого файла 36 Страница с файлом стилей Привет, Вася! Страница с файлом стилей Привет, Вася! qq.html test.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } таблица стилей
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Наследование стилей 37 Привет, Вася! Петя, тебе тоже привет! Привет, Вася! Петя, тебе тоже привет! body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } наследуется не наследуется (прозрачный фон) не наследуется (прозрачный фон)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили для элементов: шрифты 38 p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный italic - курсив normal – обычный bold - жирный normal – обычный bold - жирный
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили: размеры, выравнивание 39 p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } 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 выравнивание: left center right justify 100px 80% 20px цвет фона абзацный отступ
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рамка, поля, отступы 40 p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная 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 5px 20px
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рамка, поля и отступы 41 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
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили гиперссылок 42 a { color: green; text-decoration: none; } a { color: green; text-decoration: none; } Все гиперссылки: a:visited { color: #0000AA; } Посещённые гиперссылки: a:hover { color: red; text-decoration: underline; } a:hover { color: red; text-decoration: underline; } Гиперссылки при наведении мыши: убрать подчёркивание псевдокласс подчёркивание
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Классы 43 Ошибка! Что-то с памятью. Ошибка! Что-то с памятью. p.error { background:red; } p.error { background:red; } для абзацев класса error p { background:blue; color:white; } p { background:blue; color:white; } каскад! Более конкретное указание отменяет более общее! !
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Классы 44. error { background:red; color:white; }.error { background:red; color:white; } для всех элементов класса error Ошибка! Что-то с памятью. Ошибка! Что-то с памятью. элемент в тексте
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок 45 p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок без повторения 46 p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Составные селекторы 47 code, pre { font-weight: bold; font-family: Courier New, monospace; } code, pre { font-weight: bold; font-family: Courier New, monospace; } Общие свойства для нескольких тэгов: em a { font-style: normal; } em a { font-style: normal; } Вложенные элементы: a внутри em
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Сложные селекторы 48 p. a { color: green; text-decoration:none; } p. a { color: green; text-decoration:none; } p. a:hover { color: #00F; text-decoration:underline; } p. a:hover { color: #00F; text-decoration:underline; } p. a:visited { color: #F0F; } p. a:visited { color: #F0F; } ссылки внутри абзаца класса убрать подчеркивание посещённые ссылки подчеркнуть мышь над ссылкой то же, что #FF00FF
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 27. Рисунки 49
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Форматы рисунков 50 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) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Форматы рисунков 51 SVG (Scalable Vector Graphics, масштабируемые векторные изображения) <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)"/> <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)"/>
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рисунки в документе 52 из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание 53 left right top bottom (по умолчанию) middle
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Отступы 54 vspace (vertical space) hspace (horizontal space)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Другие атрибуты 55 <img src="night.jpg" alt="Фото: Ладога" title="Ночь на Ладоге" width="800" height="600"> <img src="night.jpg" alt="Фото: Ладога" title="Ночь на Ладоге" width="800" height="600"> надпись на месте рисунка, если его нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет всплывающая подсказка
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рисунок-гиперссылка 56 <img src="mailru.jpg" alt="Бесплатная почта" border="0"> <img src="mailru.jpg" alt="Бесплатная почта" border="0"> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Вставка векторных рисунков 57 <object type="image/svg+xml" data="test.svg" width="48" height="48" align="left"> <object type="image/svg+xml" data="test.svg" width="48" height="48" align="left"> тип нестандартных данных имя файла размеры выравнивание
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок 58 body { background: url(grad.jpg); } body { background: url(grad.jpg); } body { background: url(grad.jpg) #EEE; } body { background: url(grad.jpg) #EEE; } 'images/grad.jpg' '../images/grad.jpg ' 'images/grad.jpg' '../images/grad.jpg ' если рисунка нет…
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок 59 body{ background: url(grad.jpg) no-repeat; } body{ background: url(grad.jpg) repeat-y; } если рисунок меньше, он повторяется не повторять повторять по вертикали
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок 60 Не должно быть «швов»! ! ! Фон не должен мешать чтению! ! !
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 28. Мультимедиа 61
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Вставка мультимедийных файлов 62 <embed src="myaw.wav" autostart="false"> <embed src="myaw.wav" autostart="false"> имя файла автозапуск Звуковой файл: Флэш-анимация: <embed src="cube.swf" width="275" height="200"> <embed src="cube.swf" width="275" height="200"> имя файла размеры
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Вставка мультимедийных файлов 63 <embed src=" width="425" height="350"> <embed src=" width="425" height="350"> адрес ролика Видео: размеры
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, HTML5 – тэг audio 64 <audio src="nature.ogg" autostart="false" controls="controls" width="425" height="350"> <audio src="nature.ogg" autostart="false" controls="controls" width="425" height="350"> имя файла показывать элементы управления размеры
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, HTML5 – тэг video 65 <video src="sail.ogv" controls="controls" autostart="false" width="425" height="350"> Ваш браузер не поддерживает элемент video. <video src="sail.ogv" controls="controls" autostart="false" width="425" height="350"> Ваш браузер не поддерживает элемент video. <video width="425" height="350" controls="controls"> <source src="start.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <video width="425" height="350" controls="controls"> <source src="start.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <video width="425" height="350" controls="controls"> <source src="finish.webm" type='video/webm; codecs="vp8, vorbis"'> <video width="425" height="350" controls="controls"> <source src="finish.webm" type='video/webm; codecs="vp8, vorbis"'>
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 29. Таблицы 66
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Простые таблицы толщина рамки Вася Петров Вася Петров table row (строка) table row (строка) table data (ячейка с данными) table data (ячейка с данными)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Заголовки таблиц 68 месяц январь февраль март месяц январь февраль март table header (заголовок) table header (заголовок) жирный, по центру
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Объединение ячеек – столбцы 69 месяц январь февраль март месяц январь февраль март column span (охват столбцов)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Объединение ячеек – строки 70 Привет, Вася! Петя! Коля! Привет, Вася! Петя! Коля! row span (охват строк)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Табличная вёрстка 71 Самая большая страна Западной Европы. Самая большая страна Западной Европы. Франция Париж Франция Париж скрытая таблица!
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Вложенные таблицы 72 Вася Петя Маша Даша Вася Петя Маша Даша
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Размеры (через CSS) 74 table.spec { width: 60%; height: 300; } table.spec { width: 60%; height: 300; } table.spec tr { height: 50px; } table.spec tr { height: 50px; } всей таблицы: строки: ячейки: table.spec td.qq { width: 25%; height: 50px; } table.spec td.qq { width: 25%; height: 50px; }......
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание 75 <tr align="center" valign="top"> по центру, по верхней границе <td align="right" valign="middle" width="200">по правой границе, по середине <tr align="center" valign="top"> по центру, по верхней границе <td align="right" valign="middle" width="200">по правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание (через CSS) 76 По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } 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 left, center, right top, middle, bottom top, middle, bottom
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фон и цвет текста (через CSS) 77 Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов 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"); } 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"); } цвет фона рисунок
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Отступы 78 <table cellspacing = " 10" cellpadding = " 10" bgcolor = blue> 1 2 <table cellspacing = " 10" cellpadding = " 10" bgcolor = blue> 1 2 интервал между ячейками отступ внутри ячеек cellspacing cellpadding
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Отступы (через CSS) border-spacing padding table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } кроме IE 6 идентификатор – уникальное имя
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 30. Блоки 80
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое блок ( div )? свойства блока: 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
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рамка, поля и отступы 82 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
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили для блоков 83 Ответ: 45. Ответ: 45. идентификатор (уникальный!).info { margin: 5px 5px 10px 20px; padding: 3px; } #result { background: #CCCCFF; border: 1px solid blue; }.info { margin: 5px 5px 10px 20px; padding: 3px; } #result { background: #CCCCFF; border: 1px solid blue; }
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, «Плавающий» блок 84 <img src="dog.jpg" width="100" height="66"> На природе <img src="dog.jpg" width="100" height="66"> На природе.picture { float:left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; }.picture { float:left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } div
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 31. Динамический HTML 85
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое DHTML? 86 Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model). DOM Привет, Вася! DOM Привет, Вася! document html head title DOM body em Привет, p p Вася!
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, «Живой» рисунок 87 box_closed.gifbox_opened.gif <img src="box_closed.gif" onMouseOver="this.src='box_opened.gif'" onMouseOut="this.src='box_closed.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)
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Скрытый блок 88 ЛКМ Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др..hidden { display:none; }.hidden { display:none; } не показывать Зачем нужен id ? ? ? block – во всю ширину inline – в тексте
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Javascript-файл 89 Файл test.js function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } найти элемент по id функция имя функции переменная если нашли изменить свойство display block – во всю ширину inline – в тексте none – не показывать block – во всю ширину inline – в тексте none – не показывать
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Подключение Javascript-файла имя файла
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Вызов функции 91 <a href="#" onClick="show('details');return false;"> Показать детали <a href="#" onClick="show('details');return false;"> Показать детали ссылка на эту страницу дальнейшая обработка (переход по ссылке) не нужна по щелчку вызвать функцию
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, HTML-файл 92 Скрытый блок Показать детали Скрытый блок Показать детали Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. Как сделать два скрытых блока? ? ?
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Формы 93 <input type="button" value="Готово" onClick="check();"> <input type="button" value="Готово" onClick="check();"> форма – набор элементов диалога поле ввода кнопка текст на кнопке что делать при щелчке
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Формы 94 <input type="button" value="Готово" onClick="check();"> <input type="button" value="Готово" onClick="check();"> function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } Обработка события «щелчок мышью»: В файл calc.js В файл calc.js введённый текст
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 32. XML и XHTML 95
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, В чём проблема? 96 Интеграция (объединение) информационных систем А В Б обмен данными В каком формате? ? ? Двоичные файлы: небольшой объём множество форматов, приёмник должен суметь прочитать файл
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, В чём проблема? 97 Задачи: универсальный формат текстовая форма понятен человеку при просмотре только содержание (без оформления) сохранение структуры (главы, разделы) автоматическая обработка HTML: содержит тэги физической разметки нельзя вводить новые тэги нестрогий синтаксис (можно не закрывать )
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое XML? 98 Intel Celeron 2048 Мб 320 Гб Philips 190C1SB Logitech Classic 200 Genius Navigator 600 Intel Celeron 2048 Мб 320 Гб Philips 190C1SB Logitech Classic 200 Genius Navigator 600
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое XML? 99 XML = eXtensible Markup Language (расширяемый язык разметки) тэги-контейнеры в угловых скобках... атрибуты тэгов (дополнительные данные)... можно вводить новые тэги нет никаких тэгов оформления, только данные в контейнер могут быть вложены другие контейнеры иерархия – дерево! Это иерархическая база данных! ! !
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, документы Microsoft Office и OpenOffice.org: набор XML-файлов zip-архив RSS (ленты новостей на сайтах и в блогах) MathML (описание математических формул) SVG (векторная графика на веб-страницах) файлы настроек (конфигурации) программ электронные книги.fb2 XAML – язык описания интерфейсов в Windows 8 Использование XML 100
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, XML: «за» и «против» 101 открытый текстовый формат не зависит от ОС и ПО строгие правила, стандарты легко обрабатывать в программах удобен для многоуровневых списков и иерархических БД сложно описать структуры, отличающиеся от иерархии (графы) не различаются типы данных (число, текст, дата, время, логическое значение) большой объем файлов
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, XHTML 102 Задача: автоматическая обработка веб-страниц HTML: нестрогий синтаксис (можно не закрывать ) не различаются заглавные и строчные буквы XHTML = eXtensible Hypertext Markup Language имена тегов и атрибутов – только строчные буквы все тэги должны быть закрыты (например, ) правильная вложенность тэгов значения атрибутов в кавычках замена служебных символов: « < » « < » « & » « & » HTML XHTML Вася
К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 33. Размещение веб-сайтов 103
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Как разместить сайт? 104 На своём компьютере: постоянно включенный компьютер стабильный скоростной канал связи «белый» IP-адрес; установка и настройка веб-сервера защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое хостинг? 105 Хостинг услуга по размещению сайта (данных) на постоянно работающем сервере. Тарифный план стоимость ограничение объема данных (файлов и почты) ограничение трафика ежедневно: 100 пользователей 10 страниц по 100 Кбайт в месяц: 3 Гбайт поддержка баз данных (да/нет/количество) поддержка серверных скриптов (PHP) 100 Мбайт Бесплатные хостинги ucoz.ru webservis.ru wallst.ru оплата – реклама
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Типы хостинга 106 Виртуальный хостинг Виртуальный частный сервер Выделенный сервер до 1000 сайтов garage.ru toy.com vobla.net … копирование файлов в каталог ПО хостера garage.ru toy.com vobla.net виртуальная машина для каждого сайта ПО хозяина сайта vobla.net отдельный компьютер для сайта ПО хозяина сайта
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Доменные имена 107 IP-адреса: Доменные имена: Как зарегистрировать? ? ? nic.ru (RU-CENTER) Бесплатно (3-й уровень): vasya.ucoz.ru DNS-сервер
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Загрузка файлов на сайт 108 создание страниц в конструкторе: *.ucoz.ru FTP локальный компьютер каталог на сайте пароль логин сайт FileZilla (filezilla-project.org)filezilla-project.org
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Конец фильма ПОЛЯКОВ Константин Юрьевич д.т.н., учитель информатики ГБОУ СОШ 163, г. Санкт-Петербург ЕРЕМИН Евгений Александрович к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь
Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Источники иллюстраций ru.wikipedia.orgru.wikipedia.org 7. иллюстрации художников издательства «Бином» 8. авторские материалы