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

Содержание

Слайд 2

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

§ 24. Веб-сайты и веб-страницы

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

Слайд 3

Основные определения

Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки.
Гиперссылка (англ. hyper reference)

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

Слайд 4

Что такое веб-страница?

запрос на каждый файл!

HTML = Hypertext Markup Language (язык разметки гипертекста)

Что такое веб-страница? запрос на каждый файл! HTML = Hypertext Markup Language (язык разметки гипертекста)

Слайд 5

Какие бывают веб-страницы?

статические – готовые файлы *.htm, *.html
динамические – полностью или частично

Какие бывают веб-страницы? статические – готовые файлы *.htm, *.html динамические – полностью
создаются на сервере в момент запроса *.php, *.asp, *.pl, *.cgi, *.shtml …

быстро загружаются
почти не нагружают сервер

невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)

работа с базами данных

загружаются медленнее
дополнительная нагрузка на сервер

Слайд 6

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

CMS = Content Management System, система управления содержимым сайта.

Функции:
создание разделов

Системы управления сайтами CMS = Content Management System, система управления содержимым сайта.
сайта
создание страниц
база данных пользователей
управление доступом
обеспечение навигации и поиска

Слайд 7

Интерактивные страницы

DHTML = Dynamic HTML, динамический HTML.

Скрипт или сценарий (англ. script) –

Интерактивные страницы DHTML = Dynamic HTML, динамический HTML. Скрипт или сценарий (англ.
это программный код для автоматизации действий пользователя.

Javascript

замена текста, оформления, рисунков
многоуровневые выпадающие меню
скрытие и показ частей страницы
проверка данных, введенные пользователем
выполнение вычислений
игры…

Слайд 8

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

Текстовые веб-страницы

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

Слайд 9

Как создать веб-страницу?

Любой текстовый редактор (Блокнот и т.п.)

2×ЛКМ

Текстовые редакторы с подсветкой HTML-тэгов:

Как создать веб-страницу? Любой текстовый редактор (Блокнот и т.п.) 2×ЛКМ Текстовые редакторы
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)

Слайд 10

Первая веб-страница



Тэг – команда языка HTML

открывающий тэг

закрывающий тэг



Первая страница

Первая веб-страница Тэг – команда языка HTML открывающий тэг закрывающий тэг Первая

Привет!



Первая страница


Привет!

контейнер (парный тэг)

Слайд 11

Заголовки

заголовок документа

заголовок раздела

– заголовок документа

– заголовок раздела

– заголовок подраздела

Заголовки заголовок документа заголовок раздела – заголовок документа – заголовок раздела –
– заголовок параграфа

Глава 1. Информация


1.1 Что такое информация?


Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...

Слайд 12

Выравнивание заголовков

Глава 1. Информация


left,
center,
right

атрибут (свойство)

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

Слайд 13

Абзацы (параграфы)

И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит

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

Слайд 14

Абзацы (параграфы)

И вечный бой! Покой нам только снится


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


Летит, летит

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


И мнёт ковыль...


paragraph – абзац

интервал

Слайд 15

Выравнивание абзацев


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

Выравнивание абзацев Молекула воды испарилась из кипящего чайника и, подлетая к потолку,
лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?


left, center, right, justify

Решение:
align="left"

Слайд 16

Переход на новую строку

И вечный бой! Покой нам только снится
Сквозь кровь и

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

break – разрыв

Слайд 17

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

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

Слайд 18

Применение специальных символов

Дом сдали в 2011 году.

А.С. Пушкин

Пёс весил 12 кг.

Неразрывный пробел ( )

год

инициалы

единицы измерения

Из

Применение специальных символов Дом сдали в 2011 году. А.С. Пушкин Пёс весил 12 кг. Неразрывный
дома вышел А.С. Пушкин – солнце
русской поэзии.

не отрывать:

Слайд 19

Применение специальных символов

Вышел А.С. Пушкин — солнце русской поэзии.

Длинное тире (—)

Вышел А.С. Пушкин

Применение специальных символов Вышел А.С. Пушкин — солнце русской поэзии. Длинное тире (—) Вышел
– солнце русской поэзии.

не начинать строку с тире!

Короткое тире (–)

Дорога Васюки–Васютино строилась
в 2007–2013 годах.

Слайд 20

Применение специальных символов

Угловые скобки (< >)

Верно ли, что X < Y?


X

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

это начало тэга?

Слайд 21

Маркированные списки


  • Вася

  • Петя

  • Коля


unordered list (неупорядоченный список)

list item (элемент списка)

изменение маркера:

Маркированные списки Вася Петя Коля unordered list (неупорядоченный список) list item (элемент
type="disc">
...

disc ∙
circle ○
square ■

Слайд 22

Нумерованные списки


  1. Вася

  2. Петя

  3. Коля


ordered list (упорядоченный список)

изменение нумерации:


    ...

1, i, I,

Нумерованные списки Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: ...
a, A

Слайд 23

Многоуровневые списки


  1. Россия

  2. Украина



  • Москва

  • Санкт-Петербург



  • Киев

  • Одесса


Многоуровневые списки Россия Украина Москва Санкт-Петербург Киев Одесса

Слайд 24

Гиперссылки (локальные)

Переход на
новую страницу.

anchor
(якорь)

hyper reference (гиперссылка)

страница в

Гиперссылки (локальные) Переход на новую страницу . anchor (якорь) hyper reference (гиперссылка)
том же каталоге:

во вложенном каталоге:

Информация.

в родительском каталоге:

Информация.

в соседнем каталоге:

Информация.

Слайд 25

Гиперссылки (внешние)


Информация.

на URL:

на главную страницу сайта:

Информация.

для скачивания архива:


Скачать.

для запуска

Гиперссылки (внешние) Информация . на URL: на главную страницу сайта: Информация .
почтовой программы:

Напишите мне!

Слайд 26

Как записать гиперссылки от show.htm?

Как записать гиперссылки от show.htm?

Слайд 27

Метки внутри документов

Там в лесу живет
медведь.
...
...
...

Медведь


Медведь — хищное млекопитающее семейства

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

медведь

на метку в другом файле:

медведь

Слайд 28

Куда переход?

...
...
...
...
...
...
...

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

Слайд 29

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

§ 26. Оформление документов

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

Слайд 30

оформление

Содержание и оформление

содержание (контент)

Веб-страница:

содержание

оформление

Сборник задач по физике


Григорий Остер


Задача 61

Петя ехал к

оформление Содержание и оформление содержание (контент) Веб-страница: содержание оформление Сборник задач по
бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.

логическая разметка
(*.html)

физическая разметка
(*.css)

Слайд 31

Логическая разметка (HTML)

Выделение (emphasize):

Вася

Сильное выделение (strong):

Вася

Программный код (code):

a:=b+c;

Определение (definition):

Информация — это...

Цитата (citation):

Карету

Логическая разметка (HTML) Выделение (emphasize): Вася Сильное выделение (strong): Вася Программный код
мне, карету!

Сокращение (abbreviation):

НИИЧАВО

Слайд 32

Оформление текстов программ


iMin := 1;
for i:=2 to n do
 if a[i] <

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

iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;

preformatted (уже отформатированный)

Слайд 33

Тэги физической разметки HTML

Курсив (italic):

Вася

Вася

Жирный (bold):

Вася

Вася

Подчёркивание (underline):

Вася

Вася

Зачёркивание (strikeout):

Вася

Вася

Верхний индекс (superscript):

Вася2

Вася2

Нижний индекс (subscript):

Вася2

Вася2

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

Слайд 34

Стилевые файлы

содержание

оформление

Рекурсия


У попа была собака, он её любил,
Она съела кусок мяса, он

Стилевые файлы содержание оформление Рекурсия У попа была собака, он её любил,
её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...

main.css

mob.css

printer.css

CSS (Cascading Style Sheets) – каскадные таблицы стилей.

Слайд 35

Стилевые файлы

body {
color: white;
background: #FF6600;
}

название тэга

свойство

селектор

color – цвет символов
background

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

test.css

значение

R = FF16 = 255
G = 6616 = 102
B = 0

Слайд 36

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



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



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


qq.html

test.css

body {
color: white;

Подключение стилевого файла Страница с файлом стилей Привет, Вася! qq.html test.css body
background: #0000E0;
}

таблица стилей

Слайд 37

Наследование стилей


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

Петя, тебе тоже привет!



body {
color: white;
background: #0000E0;
}

наследуется

не наследуется
(прозрачный

Наследование стилей Привет, Вася! Петя, тебе тоже привет! body { color: white;
фон)

Слайд 38

Стили для элементов: шрифты

p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight:

Стили для элементов: шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic;
bold;
}

для всех абзацев

семейство шрифтов

serif – с засечками
sans-serif – без засечек
monospace – моноширинный

размер в пикселях

normal – обычный
italic - курсив

normal – обычный
bold - жирный

Слайд 39

Стили: размеры, выравнивание

p {
background: #E6E6FF;
width: 80%;
height: 100px;
text-align: left;

Стили: размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align:
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

цвет фона

абзацный отступ

Слайд 40

Рамка, поля, отступы

p {
background: #ccffcc;
border: 1px solid green;
margin: 0

Рамка, поля, отступы p { background: #ccffcc; border: 1px solid green; margin:
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

20px

Слайд 41

Рамка, поля и отступы

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam

Рамка, поля и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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

Слайд 42

Стили гиперссылок

a {
color: green;
text-decoration: none;
}

Все гиперссылки:

a:visited { color:

Стили гиперссылок a { color: green; text-decoration: none; } Все гиперссылки: a:visited
#0000AA; }

Посещённые гиперссылки:

a:hover {
color: red;
text-decoration: underline;
}

Гиперссылки при наведении мыши:

убрать подчёркивание

псевдокласс

псевдокласс

подчёркивание

Слайд 43

Классы

Ошибка!
Что-то с памятью.


p.error {
background:red;
}

для абзацев класса error

p {
background:blue;

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

каскад!

Слайд 44

Классы

.error {
background:red;
color:white;
}

для всех элементов класса error

Ошибка!
Что-то с памятью.


элемент

Классы .error { background:red; color:white; } для всех элементов класса error Ошибка!
в тексте

Слайд 45

Фоновый рисунок

p.hallo {
background: white url(images/grad.jpg);
}


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


p.hallo {
background: url(grad.jpg) repeat-y;
}

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

Слайд 46

Фоновый рисунок без повторения

p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}


qq@mail.ru

qq@mail.ru

Фоновый рисунок без повторения p.email { background: url(letter.gif) no-repeat; padding-left: 20px; } qq@mail.ru qq@mail.ru qq@mail.ru

Слайд 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;
}

Вложенные элементы:

a внутри em

Слайд 48

Сложные селекторы

p.email a {
color: green;
text-decoration:none;
}

p.email a:hover {
color: #00F;
text-decoration:underline;

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

}

p.email a:visited {
color: #F0F;
}

ссылки внутри абзаца класса email

убрать подчеркивание

посещённые ссылки

подчеркнуть

мышь над ссылкой

то же, что #FF00FF

Слайд 49

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

§ 27. Рисунки

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

Слайд 50

Форматы рисунков

GIF (Graphic Interchange Format)
сжатие без потерь (LZW)
прозрачные области
анимация
только с палитрой (2…256

Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь (LZW) прозрачные области
цветов)
рисунки с четкими границами, мелкие рисунки

JPEG (Joint Photographer Expert Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото

PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

Слайд 51

Форматы рисунков

SVG (Scalable Vector Graphics, масштабируемые векторные изображения)


x="0"

Форматы рисунков SVG (Scalable Vector Graphics, масштабируемые векторные изображения) x="0" y="10" stroke-width="1"
y="10"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/>
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>

Слайд 52

Рисунки в документе





из той

Рисунки в документе из той же папки: из другой папки: с другого
же папки:

из другой папки:

с другого сервера:

image (изображение)

source (источник)

Слайд 53

Выравнивание


left

right

top

bottom
(по умолчанию)

middle

Выравнивание left right top bottom (по умолчанию) middle

Слайд 54

Отступы



vspace
(vertical space)

hspace
(horizontal space)

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

Слайд 55

Другие атрибуты

Фото: Ладога title="Ночь на Ладоге" width="800"
height="600">

надпись на

Другие атрибуты title="Ночь на Ладоге" width="800" height="600"> надпись на месте рисунка, если
месте рисунка, если его нет

размеры позволяют:
растянуть – сжать
не портить дизайн, если рисунка нет

всплывающая подсказка

Слайд 56

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


alt="Бесплатная почта" border="0">




локальная ссылка:

ссылка на

Рисунок-гиперссылка alt="Бесплатная почта" border="0"> локальная ссылка: ссылка на другой сервер: иначе будет
другой сервер:

иначе будет синяя рамка вокруг

если не вплотную к , будет «хвост»

не будет «хвоста»

Слайд 57

Вставка векторных рисунков

data="test.svg"
width="48" height="48"
align="left">

тип нестандартных данных

имя

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

размеры

выравнивание

Слайд 58

Фоновый рисунок

body {
background: url(grad.jpg);
}

body {
background: url(grad.jpg) #EEE;
}

'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'

если рисунка нет…

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

Слайд 59

Фоновый рисунок

body{ background: url(grad.jpg) no-repeat; }

body{ background: url(grad.jpg) repeat-y; }

если рисунок меньше,

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

не повторять

повторять по вертикали

Слайд 60

Фоновый рисунок

Фоновый рисунок

Слайд 61

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

§ 28. Мультимедиа

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

Слайд 62

Вставка мультимедийных файлов

autostart="false">

имя файла

автозапуск

Звуковой файл:

Флэш-анимация:

width="275" height="200">

имя файла

размеры

Вставка мультимедийных файлов autostart="false"> имя файла автозапуск Звуковой файл: Флэш-анимация: width="275" height="200"> имя файла размеры

Слайд 63

Вставка мультимедийных файлов

width="425" height="350">

адрес ролика

Видео:

размеры

Вставка мультимедийных файлов width="425" height="350"> адрес ролика Видео: размеры

Слайд 64

HTML5 – тэг audio


имя файла

показывать

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

размеры

Слайд 65

HTML5 – тэг video

HTML5 – тэг video controls="controls" autostart="false" width="425" height="350"> Ваш браузер не поддерживает
браузер не поддерживает элемент video.



Слайд 66

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

§ 29. Таблицы

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

Слайд 67

Простые таблицы


. . .

толщина рамки






Вася Петров

table row
(строка)

table data

Простые таблицы . . . толщина рамки Вася Петров table row (строка)

(ячейка с данными)

Слайд 68

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














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

table header
(заголовок)

жирный, по центру

Заголовки таблиц месяц январь февраль март table header (заголовок) жирный, по центру

Слайд 69

Объединение ячеек – столбцы










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

column span (охват столбцов)

Объединение ячеек – столбцы месяц январь февраль март column span (охват столбцов)

Слайд 70

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












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

row span (охват строк)

Объединение ячеек – строки Привет, Вася! Петя! Коля! row span (охват строк)

Слайд 71

Табличная вёрстка







Самая большая страна
Западной Европы.






Франция Париж

скрытая

Табличная вёрстка Самая большая страна Западной Европы. Франция Париж скрытая таблица!
таблица!

Слайд 72

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










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




122
3334444

Вложенные таблицы Вася Петя Маша Даша 1 22 333 4444

Слайд 73

Размеры


...

ширина в пикселях или в % от ширины окна браузера

высота

Размеры ... ширина в пикселях или в % от ширины окна браузера
в пикселях


...

всей таблицы:

строки:

ячейки:


...

ширина в пикселях или в % от ширины таблицы

Слайд 74

Размеры (через CSS)

table.spec {
width: 60%;
height: 300;
}

table.spec tr {
height: 50px;
}

всей

Размеры (через CSS) table.spec { width: 60%; height: 300; } table.spec tr
таблицы:

строки:

ячейки:

table.spec td.qq {
width: 25%;
height: 50px;
}


...

Слайд 75

Выравнивание


valign="top">

Выравнивание valign="top"> по центру, по верхней границе width="200">по правой границе, по середине


по центру,
по верхней границе		 width="200">по правой границе,
по середине


...

всей таблицы:

информации в ячейках:

left,
center,
right

left,
center,
right

top,
middle,
bottom

Слайд 76

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




Выравнивание (через CSS) По центру, по верхней границе По правой границе, по


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

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

Слайд 77

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







Фон и цвет текста (через CSS) Привет! Таблица из двух строк и



Привет!

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

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");
}

цвет фона

рисунок

Слайд 78

Отступы

bgcolor = blue>
Отступы bgcolor = blue> 1 2 интервал между ячейками отступ внутри ячеек cellspacing cellspacing cellpadding cellpadding
= white>



1 2

интервал между ячейками

отступ внутри ячеек

cellspacing

cellspacing

cellpadding

cellpadding

Слайд 79

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






1 2

border-spacing

border-spacing

padding

padding

table#qq {
background:

Отступы (через CSS) 1 2 border-spacing border-spacing padding padding table#qq { background:
blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
}
#qq tr {
background: white;
}

кроме IE 6

идентификатор – уникальное имя

Слайд 80

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

§ 30. Блоки

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

Слайд 81

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


...




...

свойства блока:
Что такое блок (div)? ... ... свойства блока:

Слайд 82

Рамка, поля и отступы

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam

Рамка, поля и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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

Слайд 83

Стили для блоков


Ответ: 45.

идентификатор (уникальный!)

.info {
margin: 5px 5px 10px

Стили для блоков Ответ: 45. идентификатор (уникальный!) .info { margin: 5px 5px
20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}

Слайд 84

«Плавающий» блок


width="100"
height="66">

На природе



.picture {

«Плавающий» блок width="100" height="66"> На природе .picture { float:left; margin: 5px; }
float:left; margin: 5px; }
.picture p {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}

Слайд 85

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

§ 31. Динамический HTML

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

Слайд 86

Что такое DHTML?

Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая

Что такое DHTML? Динамический HTML (DHTML) – это технология создания интерактивных сайтов,
HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model).



DOM


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




document

html

head

title

DOM

body

em

Привет,

p

Вася!

Слайд 87

«Живой» рисунок

box_closed.gif

box_opened.gif

onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">

this.src='box_opened.gif'

свойство src этого объекта

вложенные кавычки

обработчик события (Javascript)

«Живой» рисунок box_closed.gif box_opened.gif onMouseOver="this.src='box_opened.gif'" onMouseOut="this.src='box_closed.gif'"> this.src='box_opened.gif' свойство src этого объекта вложенные кавычки обработчик события (Javascript)

Слайд 88

Скрытый блок

ЛКМ

Скрытый блок ЛКМ Детали &#151; это гайка, шайба, болт, винт, шуруп, гвоздь
и др.

.hidden {
display:none;
}

не показывать

block – во всю ширину
inline – в тексте

Слайд 89

Javascript-файл

Файл test.js

function show ( name )
{
var elem = document.getElementById(name);

Javascript-файл Файл test.js function show ( name ) { var elem =
if ( elem )
elem.style.display = "block";
}

найти элемент по id

функция

имя функции

переменная

если нашли

изменить свойство display

block – во всю ширину
inline – в тексте
none – не показывать

Слайд 90

Подключение Javascript-файла



...

имя файла

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

Слайд 91

Вызов функции

onClick="show('details');return false;">
Показать детали

ссылка на эту страницу

дальнейшая обработка (переход

Вызов функции onClick="show('details');return false;"> Показать детали ссылка на эту страницу дальнейшая обработка
по ссылке) не нужна

по щелчку вызвать функцию

Слайд 92

HTML-файл



Скрытый блок




false;">
Показать детали



Слайд 93

Формы



value="Готово"
onClick="check();">

форма – набор

Формы value="Готово" onClick="check();"> форма – набор элементов диалога поле ввода кнопка текст
элементов диалога

поле ввода

кнопка

текст на кнопке

что делать при щелчке

Слайд 94

Формы



value="Готово"
onClick="check();">

function check()
{
if (

Формы value="Готово" onClick="check();"> function check() { if ( calc.answer.value == "4" )
calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}

Обработка события «щелчок мышью»:

В файл
calc.js

введённый текст

Слайд 95

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

§ 32. XML и XHTML

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

Слайд 96

В чём проблема?

Интеграция (объединение) информационных систем

А

В

Б

обмен данными

Двоичные файлы:

небольшой объём

множество форматов, приёмник должен

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

Слайд 97

В чём проблема?

Задачи:

универсальный формат
текстовая форма
понятен человеку при просмотре
только содержание (без оформления)
сохранение структуры

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

HTML:

содержит тэги физической разметки
нельзя вводить новые тэги
нестрогий синтаксис (можно не закрывать

)

Слайд 98

Что такое XML?


<компьютер>
<процессор частота="2 ГГц">Intel Celeron

<память фирма="Kingston">2048 Мб

Что такое XML? Intel Celeron 2048 Мб 320 Гб Philips 190C1SB Logitech
<винчестер фирма="Seagate">320 Гб

<периферия>
<монитор>Philips 190C1SB
<клавиатура>Logitech Classic 200

<мышь>Genius Navigator 600


Слайд 99

Что такое XML?

XML = eXtensible Markup Language
(расширяемый язык разметки)

тэги-контейнеры в

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

Слайд 100

документы Microsoft Office и OpenOffice.org:
набор XML-файлов → zip-архив
RSS (ленты новостей на

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

Использование XML

Слайд 101

XML: «за» и «против»

открытый текстовый формат
не зависит от ОС и ПО
строгие правила,

XML: «за» и «против» открытый текстовый формат не зависит от ОС и
стандарты ⇒ легко обрабатывать в программах
удобен для многоуровневых списков и иерархических БД

сложно описать структуры, отличающиеся от иерархии (графы)
не различаются типы данных (число, текст, дата, время, логическое значение)
большой объем файлов

Слайд 102

XHTML

Задача: автоматическая обработка веб-страниц

HTML:

нестрогий синтаксис (можно не закрывать

)
не различаются заглавные и

XHTML Задача: автоматическая обработка веб-страниц HTML: нестрогий синтаксис (можно не закрывать )
строчные буквы

XHTML = eXtensible Hypertext Markup Language
имена тегов и атрибутов – только строчные буквы
все тэги должны быть закрыты (например,
)
правильная вложенность тэгов
значения атрибутов в кавычках
замена служебных символов:
«<» → «<» «&» → «&»

HTML

XHTML

Вася


Пес Барбос

Слайд 103

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

§ 33. Размещение веб-сайтов

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

Слайд 104

Как разместить сайт?

На своём компьютере:
постоянно включенный компьютер
стабильный скоростной канал связи
«белый» IP-адрес;
установка и

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

Слайд 105

Что такое хостинг?

Хостинг — услуга по размещению сайта (данных) на постоянно работающем

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

Тарифный план ⇒ стоимость
ограничение объема данных (файлов и почты)
ограничение трафика
ежедневно: 100 пользователей
10 страниц по 100 Кбайт
в месяц: ≈ 3 Гбайт
поддержка баз данных (да/нет/количество)
поддержка серверных скриптов (PHP)

≈100 Мбайт

Бесплатные хостинги
ucoz.ru
webservis.ru
www.hostinger.ru
www.holm.ru
www.hut.ru
wallst.ru

оплата – реклама

Слайд 106

Типы хостинга

Виртуальный хостинг

Виртуальный частный сервер

Выделенный сервер

до 1000 сайтов

garage.ru
toy.com
vobla.net
…

копирование файлов в каталог
ПО хостера

garage.ru
toy.com
vobla.net

виртуальная

Типы хостинга Виртуальный хостинг Виртуальный частный сервер Выделенный сервер до 1000 сайтов
машина для каждого сайта
ПО хозяина сайта

vobla.net

отдельный компьютер для сайта
ПО хозяина сайта

Слайд 107

Доменные имена

IP-адреса: 94.100.101.202

Доменные имена: www.mail.ru

nic.ru
(RU-CENTER)

Бесплатно (3-й уровень): vasya.ucoz.ru

DNS-сервер

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

Слайд 108

Загрузка файлов на сайт

создание страниц в конструкторе: *.ucoz.ru
FTP

локальный компьютер

каталог на сайте

пароль

логин

сайт

FileZilla (filezillafilezilla-filezilla-projectfilezilla-project.filezilla-project.org)

Загрузка файлов на сайт создание страниц в конструкторе: *.ucoz.ru FTP локальный компьютер

Слайд 109

Конец фильма

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

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

Похожие презентации

Лекция 28. Тема 4.2
Перелетные птицы. Материал для дополнительных занятий по развитию речи детей 4-5 лет
Атаки на алгоритмы шифрования
Классификация и типовая организация СУБД. Основные функции СУБД. Лекция 2
Поиск музыки по напеванию
Компьютер. Windows Premium Pro 10 Glow
Основные свойства и функции информации
Line graph essay
Назначение, принцип работы, основные пользовательские характеристики устройств ПК
NTPP. Общие факты
Food and Drink
Общие сведения об операционных системах, средах, оболочках, системных программах. Лекция 1-2
Компьютер и его ПО. Глава 2
Презентация на тему Операторы линейных программ
3ds max. Базовые уроки
Microsoft Office. Краткая характеристика изученных программ
Воспаление: структурно-функциональные и молекулярно-биологические аспекты Электронное обучающе-контролирующее учебное пособие
Системы анализа больших данных (САБД)
Обзор понятий, возникающих при установке операционной системы на примере Windows 7
Работа с интернет магазином, интернет - СМИ, интернет - библиотекой
Дерево потомков (информатика, 3 класс)
Основы программирования. Язык программирования С++. Массивы
Создание и управление потоками, параллельная обработка потоков C++
Презентация на тему Статистическая обработка данных в матрицах
Модифицированный метод шифрования
Основы алгоритмизации инженерных задач
Алгоритмическая конструкция следование
Безопасность в интернете
LiveInternet
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть