- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Методы и средства создания и сопровождения сайта презентация
Содержание
- 1. Методы и средства создания и сопровождения сайта
- 2. WWW (World Wide Web) – служба для
- 3. Основные определения Гиперссылка (англ. hyper reference) –
- 4. Веб-браузеры Internet Explorer Firefox (www.mozilla-russia.org)
- 5. Веб-сервер – это программа, которая обеспечивает работу
- 6. Протокол передачи гипертекста Протокол передачи гипертекстовой информации
- 7. запрос на каждый файл! HTML = Hypertext Markup Language (язык разметки гипертекста)
- 8. Веб-страницы бывают статические – готовые файлы
- 9. Системы управления сайтами CMS = Content Management System,
- 10. Интерактивные страницы DHTML = Dynamic HTML, динамический HTML.
- 11. Как создать веб-страницу? Любой текстовый редактор (Блокнот
- 12. Язык гипертекстовой разметки HTML HyperText Markup Language
- 13. Первая веб-страница Тэг –
- 16. Спецификация языка HTML позволяет опускать кавычки для
- 17. Комментарий открывается символьной последовательностью, начинающейся с
- 18. Методы описания цвета элементов: посредством
- 19. Цветовая палитра HTML состоит из сочетаний оттенков красного,
- 20. Фон документа
- 21. Тэг BODY – общие свойства страницы цвет
- 22. Теги для форматирования текста
- 23. Теги для форматирования текста
- 24. Тэги физической разметки HTML Курсив (italic): Вася
- 25. Тэг FONT – свойства блока текста цвет
- 26. Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание
- 27. Наиболее распространенные Escape-последовательности
- 28. Специальные символы
- 29. Фраза Он сказал: «Поехали!» в тексте веб-страницы
- 30. Заголовки: H1 … H6 Заголовок документа
- 31. Абзацы переход на новую строку
- 32. Выравнивание Этот текст выровнен по центру.
- 33. Маркированные списки Вася Петя
- 34. Нумерованные списки Вася Петя
- 35. Списки определений компьютер устройство
- 36. Многоуровневые списки Города России
- 37. Ссылки на другие страницы сайта Таблицы страница
- 38. Ссылки на другие сайты Почта на главную
- 39. Запуск почтовой программы Напишите мне!
- 40. Ссылки внутри страницы Глава 1
- 41. Цвет гиперссылок ... LINK
- 42. Форматы рисунков GIF (Graphic Interchange Format) сжатие
- 43. Рисунки в документе
- 44. Выравнивание left right top bottom (по умолчанию) middle
- 45. Отступы VSPACE (vertical space) HSPACE (horizontal space)
- 46. Другие атрибуты всплывающая подсказка надпись
- 47. Рисунок-гиперссылка локальная
- 48. Простейшая таблица Таблица
- 49. Размеры ... ширина в пикселях
- 50. Фреймы Фрейм (frame) – это часть сложной
- 51. Описание структуры index.html
- 52. Граница между фреймами ...
- 53. Настройка фрейма (FRAME) убрать отступы от
- 54. Фреймы-строки index.html Фреймы-строки
- 55. Сложные структуры (3 фрейма) index.html
- 56. Как открыть ссылку в другом фрейме
- 57. Блоки (DIV) – любое содержимое
- 58. Блоки (DIV) – рамки и отступы
- 59. «Плавающие» блоки .picture {
Слайд 2WWW (World Wide Web) – служба для обмена информацией в виде
Гипертекст – текст, содержащий активные ссылки (гиперссылки) на другие документы.
Гипермедиа – документ, который включает текст, рисунки, звуки, видео, причём каждый элемент может быть гиперссылкой.
Основные определения
Слайд 3Основные определения
Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой
Веб-страница – это гипертекстовый документ в Интернете.
Веб-сайт (ресурс, узел) — web-site — это пространство/место в сети Интернет, которое определяется адресом (URL), имеет владельца и состоит из веб-страниц, объединенных общей темой, дизайном и связанных между собой ссылками.
Слайд 4Веб-браузеры
Internet Explorer
Firefox (www.mozilla-russia.org)
Chrome (www.google.com/chrome)
Safari (www.apple.com/safari)
Opera (www(www.(www.opera(www.opera.(www.opera.com)
бесплатно!
Браузер
Слайд 5Веб-сервер – это программа, которая обеспечивает работу сайтов: приём запросов и
Веб-сёрфинг — переход со страницы на страницу с
помощью ссылок.
Слайд 6Протокол передачи гипертекста
Протокол передачи гипертекстовой информации
HyperText Transfer Protocol (HTTP)
Протокол
Основная задача протокола состоит в установлении связи с веб-сервером и обеспечении доставки HTML-страниц веб-браузеру клиента.
HTTPS = HyperText Transfer Protocol Secure –
предусматривает шифрование
Слайд 8Веб-страницы бывают
статические – готовые файлы *.htm, *.html
динамические – полностью или частично
быстро загружаются
почти не нагружают сервер
невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)
работа с базами данных
загружаются медленнее
дополнительная нагрузка на сервер
Слайд 9Системы управления сайтами
CMS = Content Management System, система управления содержимым сайта.
Функции:
создание
создание страниц
база данных пользователей
управление доступом
обеспечение навигации и поиска
Слайд 10Интерактивные страницы
DHTML = Dynamic HTML, динамический HTML.
Скрипт или сценарий (англ. script)
Javascript
замена текста, оформления, рисунков
многоуровневые выпадающие меню
скрытие и показ частей страницы
проверка данных, введенные пользователем
выполнение вычислений
игры…
Слайд 11Как создать веб-страницу?
Любой текстовый редактор (Блокнот и т.п.)
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)
Слайд 12Язык гипертекстовой разметки HTML
HyperText Markup Language (HTML)
Язык гипертекстовой разметки HTML
<тег>Обрабатываемое значение
Слайд 13Первая веб-страница
Тэг – команда языка HTML
открывающий тэг
закрывающий тэг
Первая страница
Привет!
Привет!
контейнер (парный тэг)
Слайд 16Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:
Атрибуты, записываемые
2) Атрибуты, состоящие только из цифр от 0 до 9.
Например, запись атрибутов
BORDER="1" или ALIGN="CENTER"
допустимо представить как
BORDER=1 и ALIGN=CENTER.
Слайд 17
Комментарий открывается символьной последовательностью, начинающейся с открывающейся угловой скобки, восклицательного знака
Слайд 18Методы описания цвета элементов:
посредством задания специальных цветовых меток, обозначающих названия
2) с помощью шестнадцатеричного цифрового кода, заменяющего эти метки. Цветов, которые возможно отобразить посредством цифрового кода, несоизмеримо больше, чем меток.
Слайд 19Цветовая палитра HTML состоит из сочетаний оттенков красного, зеленого и синего цветов. Это
(RGB) 255.255.255 (НЕХ) FFFFFF (белый цвет)
В спецификации HTML 4.0 определены следующие
16 ключевых цветов
Слайд 21Тэг BODY – общие свойства страницы
цвет фона и текста
Привет!
цвет текста
цвет фона
атрибуты тэга
Слайд 24Тэги физической разметки HTML
Курсив (italic):
Вася
Вася
Жирный (bold):
Вася
Вася
Подчёркивание (underline):
Вася
Вася
Зачёркивание (strikeout):
Вася
Вася
Верхний индекс (superscript):
Вася2
Вася2
Нижний индекс
Вася2
Вася2
Слайд 25Тэг FONT – свойства блока текста
цвет текста
размер шрифта
Привет!
Как дела?
Привет!
Как дела?
от 1 до 7
(3 – нормальный)
Слайд 29Фраза Он сказал: «Поехали!» в тексте веб-страницы будет выглядеть, например, так:
Он
Слайд 30Заголовки: H1 … H6
Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки
выравнивание:
История
left,
center,
right
Слайд 31Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только
Сквозь кровь и пыль...
Летит, летит степная
кобылица
И мнет ковыль...
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
До самого вечера тело с варежками ...
Слайд 32Выравнивание
Этот текст выровнен по центру.
Этот текст выровнен по ширине.
Этот
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
left по левой границе
right по правой границе
center по центру
justify по ширине
атрибут тэга
Слайд 33Маркированные списки
Вася
Петя
Коля
unordered list
(неупорядоченный список)
list item
(элемент списка)
изменение маркера:
...
disk ∙
circle ○
square ■
Слайд 34Нумерованные списки
Вася
Петя
Коля
ordered list
(упорядоченный список)
изменение нумерации:
...
1,
Слайд 35Списки определений
компьютер
устройство для
обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный
диск
definition
definition term (термин)
definition description (описание)
Слайд 37Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor (якорь)
hyper reference (гиперссылка)
страница во вложенной папке
страница в соседней папке
выйти из текущей папки
Слайд 38Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp, …
на
на файл для скачивания
для запуска почтовой программы:
Слайд 40Ссылки внутри страницы
Глава 1
Глава 2
Глава 1
Это текст
Это текст главы 1. Это текст главы 1.
Наверх
Глава 2
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.
Наверх
в другом файле
метка (якорь)
переход на метку
Слайд 41Цвет гиперссылок
...
LINK ссылки,
VLINK посещенные ссылки
ALINK активные ссылки
Слайд 42Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь
прозрачные области
анимация
только с палитрой (2…256
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
Слайд 43Рисунки в документе
из
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)
Слайд 46Другие атрибуты
всплывающая подсказка
надпись
размеры позволяют:
растянуть - сжать
не портить дизайн, если рисунка нет
толщина рамки вокруг рисунка
Слайд 47Рисунок-гиперссылка
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка вокруг
если не вплотную к , будет «хвост»
не будет «хвоста»
Слайд 48Простейшая таблица
Таблица из одной строки
из трех
без указания ширины таблицы
и ячеек.
толщина рамки
TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)
Слайд 49Размеры
...
ширина в пикселях или в % от ширины окна
высота в пикселях
...
всей таблицы:
строки:
ячейки:
...
ширина в пикселях или в % от ширины таблицы
Слайд 50Фреймы
Фрейм (frame) – это часть сложной Web-страницы, в которую может быть
3 файла:
left.html – страница в левой части
right.html – страница в правой части
index.html – описание структуры
Слайд 51Описание структуры
index.html
Фреймы-столбцы
columns
столбцы
ширина в пикселях или %
все остальное место
source
источник
имя фрейма (для ссылок)
Слайд 52Граница между фреймами
...
...
граница между фреймами:
0 – невидима,
ширина полосы между фреймами, за которую можно перетащить границу
Слайд 53Настройка фрейма (FRAME)
NORESIZE
SCROLLING="auto">
убрать отступы от края фрейма до содержимого
полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда
запретить изменение размеров
Слайд 56Как открыть ссылку в другом фрейме
Глава
TARGET
_blank – в новом окне
_parent – в родительском окне
_top – в главном окне
(убрать фреймы)
Слайд 57Блоки (DIV) – любое содержимое
Lorem ipsum dolor sit amet,
| 1 |
Слайд 58Блоки (DIV) – рамки и отступы
Lorem ipsum dolor sit amet, consectetur
padding
border
margin
#qq {
padding: 5px 10px;
border: 1px solid green;
margin: 5px 15px 5px 10px;
}
Слайд 59«Плавающие» блоки
.picture {
float: left;
margin: 5px;
}
.picture p
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}
На природе
свойства блока
свойства абзаца внутри блока
