Разработка пользовательских интерфейсов

Март 1, 2021

Главная
Информатика
Разработка пользовательских интерфейсов

Содержание

2. HTML ( HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной
3. Команды HTML называются – теги. Все теги заключаются в угловые скобки. – открывает программу – головная
4. Знакомство с HTML
5. HTML-код данной программы: Упражнение 1 Первый HTML-документ Крошка сын к отцу пришёл, и спросила кроха: —
6. Знакомство с HTML
7. Общая схема страницы
8. Веб-страница состоит из пяти основных составляющих: Изображение Заголовок Содержание Навигация Информация о странице Знакомство с HTML
9. Требования к дизайну веб-страниц: Контрастность Подобранная цветовая гамма Аккуратность Эргономичность Единство стиля Одинаковый вид во всех
10. Заголовок или название сайта Обычно крупнее чем остальной текст. Пример: Корпорация монстров Текстовое содержание – это
11. Навигация – обязательный элемент сайта. При разработке сайта, убедитесь, что перемещение по нему простое и доступное
12. Атрибут align – определяет способ выравнивания. Может выполняться по левому краю, правому краю, по центру или
13. Способ оформления теста: Один общий заголовок. Он должен быть самым крупным (тег ). Крупные части документа
14. Тег TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек,
15. Тег A является одним из важных в HTML и предназначен для создания ссылок. В качестве значения
16. HTML-списки представляют собой набор сгруппированных абзацев текста, помеченных значками или цифрами. Виды списков: Маркированный список Нумерованный
17. Маркированный список представляет собой неупорядоченный список. Создается с помощью парного тега UL (Unordered List). Каждый элемент
18. Нумерованный список помещают внутрь пары тегов OL. Каждый пункт списка нужно поместить в тег LI. Атрибуты:
19. Изображения – это визуальные элементы практически любого сайта. Для отображения изображений в графическом формате gif, jpeg,
20. Формат GIF – разработан в 1987 году. Хранит до 256 цветов – максимальное количество цветов, которые
21. Формат PNG – создан в 1995 году. Используется для публикации высококачественной растровой графики в сети. Похож
22. Формат JPG/JPEG – самый популярный формат для хранения и размещения в Интернет фотографических полноцветных изображений. «Максимальное
23. Тег Атрибуты: src=”имя файла” – задается имя файла картинки. Пример: alt=”Текст надписи” – выводит надпись на
24. width=n и height=m – задает для картинки ширину и высоту в пикселах. Пример: align – позволяет
25. Пример: При щелчке мышью на картинке откроется новая веб-страница. Изображения
26. CSS (Cascading Styles Sheet) каскадные таблицы стилей – это технология, позволяющая определять стили для документов HTML.
27. Внутриэлементное задание стиля: текст Внутридокументные стили: После : p { color: red; } В файле (предпочтительно):
28. Работа с текстом: font-family – название шрифта font-size – размер шрифта font-weight – жирность шрифта font-style
29. Единицы измерения: font-size: 2em – заданный шрифт будет в 2 раза больше шрифта по умолчанию. font-size:
30. Задаем стиль текста: В разметке страницы указываем стиль. Как выглядит текст в браузере: Каскадные таблицы стилей
31. Работа с цветом: color: red; – используем название цвета color: rgb(255,0,0); – используем rgb color: #ff0000
32. Добавление таблиц стилей в проект - после Добавляем CssClass или class Пример: Каскадные таблицы стилей
34. Скачать презентацию

Слайд 2

HTML ( HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык

разметки документов во Всемирной паутине.
Тим Бернерс-Ли – в 1986-1991 годах (ЦЕРН, Женева)
Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
Действующий стандарт: HTML5 и CSS3

Знакомство с HTML

Слайд 3

Команды HTML называются – теги.
Все теги заключаются в угловые скобки.

– открывает программу
– головная часть программы
– служебная информация
– имя документа<br><BODY> – тело программы (то что выводит браузер)<br><H1> – заголовок (бывает другие виды: H2, H3, H4, H5, H6)<br><HR> – горизонтальная линия<br><P> – абзац<br><BR> – перенос на другую строку<br><p>Знакомство с HTML<br></div></div></div><div class="slides-wrapper"><div id="slide4" class="slides-item"><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/964046/slide-3.jpg" target="_blank" rel="noopener">Слайд 4</a><h3 class="slides-content text-center font-bold"><div><p>Знакомство с HTML<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Знакомство с HTML" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/964046/slide-3.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/964046/slide-3.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/964046/slide-3.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/964046/slide-3.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/964046/slide-3.jpg" class="slides-image"></div></div><div class="slides-wrapper"><div id="slide5" class="slides-item"><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/964046/slide-4.jpg" target="_blank" rel="noopener">Слайд 5</a><h3 class="slides-content text-center font-bold"><div><p>HTML-код данной программы:<br><!DOCTYPE HTML><br><HTML><br><HEAD><br><META charset=“utf-8“ ><br><TITLE>Упражнение 1

Первый HTML-документ

Крошка сын к

отцу пришёл, и спросила кроха:
— Что такое хорошо и что такое и что такое плохо?

Знакомство с HTML

Слайд 6

Знакомство с HTML

Слайд 7

Общая схема страницы

Слайд 8

Веб-страница состоит из пяти основных составляющих:
Изображение
Заголовок
Содержание
Навигация
Информация о странице
Знакомство с HTML

Слайд 9

Требования к дизайну веб-страниц:
Контрастность
Подобранная цветовая гамма
Аккуратность
Эргономичность
Единство стиля
Одинаковый вид во всех браузерах
Основы веб-дизайна

Слайд 10

Заголовок или название сайта
Обычно крупнее чем остальной текст.
Пример:
Корпорация монстров

Текстовое содержание

– это самая главная часть страницы.
Текст должен хорошо читаться:
Шрифт не слишком мелкий
Фон текста не должен мешать чтению
Используйте абзацы, списки и ссылки

Основные элементы веб-страницы

Слайд 11

Навигация – обязательный элемент сайта.
При разработке сайта, убедитесь, что перемещение по

нему простое и доступное для всех пользователей.
Примеры навигации: меню, гиперссылки, карта сайта

Основные элементы веб-страницы

Слайд 12

Атрибут align – определяет способ выравнивания. Может выполняться по левому краю, правому

краю, по центру или по ширине.
Пример:

Заголовок текста

Текст1

Текст2

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

Слайд 13

Способ оформления теста:
Один общий заголовок. Он должен быть самым крупным (тег
).
Крупные

части документа – главы. Если есть заголовки, то они меньше общего заголовка (тег

).
Разделите текст каждой части на параграфы.
Текст каждого параграфа разбейте на абзацы (тег
). Абзацы выравниваются по левому краю (align=left).
Продумайте цветовое оформление документа.
Основы веб-дизайна

Слайд 14

Тег TABLE служит контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит

из строк и ячеек, которые задаются с помощью тегов TR и TD.
Синтаксис

...

Таблицы

Слайд 15

Тег A является одним из важных в HTML и предназначен для создания

ссылок.
В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход.
Синтаксис:
...

Гиперссылки

Слайд 16

HTML-списки представляют собой набор сгруппированных абзацев текста, помеченных значками или цифрами.
Виды

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

Списки

Слайд 17

Маркированный список представляет собой неупорядоченный список.
Создается с помощью парного тега UL

(Unordered List).
Каждый элемент списка добавляется с помощью тега LI (List Item).
Для тега LI доступен атрибут value, который позволяет изменить номер выбранного элемента списка.

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

Слайд 18

Нумерованный список помещают внутрь пары тегов OL. Каждый пункт списка нужно поместить

в тег LI.
Атрибуты:
Reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
Start задает начальное значение, от которого пойдет отсчет нумерации. Также можно одновременно задавать тип нумерации, например,

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

Слайд 19

Изображения – это визуальные элементы практически любого сайта.
Для отображения изображений в

графическом формате gif, jpeg, svg или png используется тэг img.
Файл с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой, поместив img в тэг a.
Пример:

Изображения

Слайд 20

Формат GIF – разработан в 1987 году.
Хранит до 256 цветов –

максимальное количество цветов, которые могут быть одновременно отображены на одном пикселе.
Поддерживается всеми браузерами.

Изображения

Слайд 21

Формат PNG – создан в 1995 году.
Используется для публикации высококачественной растровой

графики в сети.
Похож на GIF, но не поддерживает анимацию.

Изображения

Слайд 22

Формат JPG/JPEG – самый популярный формат для хранения и размещения в Интернет

фотографических полноцветных изображений.
«Максимальное качество при минимальном размере»

Изображения

Слайд 23

Тег
Атрибуты:
src=”имя файла” – задается имя файла картинки.
Пример:
alt=”Текст надписи”

– выводит надпись на месте картинки при ее отсутствии.
Пример: ”Моя

Изображения

Слайд 24

width=n и height=m – задает для картинки ширину и высоту в пикселах.

Пример:

align – позволяет указывать положение иллюстрации по отношению к соседним элементам документа.
align=left – выравнивание по левому краю
align=right – выравнивание по правому краю
align=top – выравнивание по верхнему краю
align=bottom – выравнивание по нижнему краю
align=middle – выравнивание по центру

Изображения

Слайд 25

Пример:

При щелчке мышью на картинке

откроется новая веб-страница.

Изображения

Слайд 26

CSS (Cascading Styles Sheet) каскадные таблицы стилей – это технология, позволяющая определять

стили для документов HTML.

Каскадные таблицы стилей

Способы задания стилей:
Внутри элементов
В документах
В отдельном файле

Слайд 27

Внутриэлементное задание стиля:
текст

Внутридокументные стили:
После :

В файле (предпочтительно):
Создаем отдельный файл с расширением .css
Добавляем в :

Каскадные таблицы стилей

Слайд 28

Работа с текстом:
font-family – название шрифта
font-size – размер шрифта
font-weight – жирность шрифта
font-style

– обычный либо курсив
text-decoration – подчеркнутость текста
text-transform – регистр букв текста

Каскадные таблицы стилей

Слайд 29

Единицы измерения:
font-size: 2em – заданный шрифт будет в 2 раза больше шрифта

по умолчанию.
font-size: 12px – единица измерения – пиксели.
font-size: 12pt – единица измерения – пункты.
font-size: 80% - единица измерения – проценты.

Каскадные таблицы стилей

Слайд 30

Задаем стиль текста:
В разметке страницы указываем стиль.
Как выглядит текст в браузере:
Каскадные таблицы

стилей

Слайд 31

Работа с цветом:
color: red; – используем название цвета
color: rgb(255,0,0); – используем rgb
color:

#ff0000 – используем 16-теричный код
Пример:
h1 {
color: yellow;
background-color: blue;
}

Каскадные таблицы стилей

Слайд 32

Добавление таблиц стилей в проект
- после
Добавляем CssClass

или class
Пример:
< … class=“btn1" … />

Каскадные таблицы стилей

Разработка пользовательских интерфейсов

Содержание

HTML ( HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык

Команды HTML называются – теги. Все теги заключаются в угловые скобки.

Первый HTML-документ

Знакомство с HTML

Общая схема страницы

Веб-страница состоит из пяти основных составляющих: ИзображениеЗаголовокСодержаниеНавигация Информация о страницеЗнакомство с HTML

Заголовок или название сайта Обычно крупнее чем остальной текст. Пример:Корпорация монстровТекстовое содержание

Корпорация монстров

Навигация – обязательный элемент сайта. При разработке сайта, убедитесь, что перемещение по

Атрибут align – определяет способ выравнивания. Может выполняться по левому краю, правому

Заголовок текста

Способ оформления теста:Один общий заголовок. Он должен быть самым крупным (тег ).Крупные

).Крупные

Тег TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит

Тег A является одним из важных в HTML и предназначен для создания

HTML-списки представляют собой набор сгруппированных абзацев текста, помеченных значками или цифрами. Виды

Маркированный список представляет собой неупорядоченный список. Создается с помощью парного тега UL

Нумерованный список помещают внутрь пары тегов OL. Каждый пункт списка нужно поместить

Изображения – это визуальные элементы практически любого сайта. Для отображения изображений в

Формат GIF – разработан в 1987 году. Хранит до 256 цветов –

Формат PNG – создан в 1995 году. Используется для публикации высококачественной растровой

Формат JPG/JPEG – самый популярный формат для хранения и размещения в Интернет

Тег Атрибуты:src=”имя файла” – задается имя файла картинки.Пример: alt=”Текст надписи”

width=n и height=m – задает для картинки ширину и высоту в пикселах.

Пример: При щелчке мышью на картинке

CSS (Cascading Styles Sheet) каскадные таблицы стилей – это технология, позволяющая определять

Работа с текстом:font-family – название шрифтаfont-size – размер шрифтаfont-weight – жирность шрифтаfont-style

Единицы измерения:font-size: 2em – заданный шрифт будет в 2 раза больше шрифта

Задаем стиль текста:В разметке страницы указываем стиль.Как выглядит текст в браузере:Каскадные таблицы

Работа с цветом:color: red; – используем название цветаcolor: rgb(255,0,0); – используем rgbcolor:

Добавление таблиц стилей в проект - после Добавляем CssClass

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

Команды HTML называются – теги.
Все теги заключаются в угловые скобки.

Веб-страница состоит из пяти основных составляющих:
Изображение
Заголовок
Содержание
Навигация
Информация о странице
Знакомство с HTML

Заголовок или название сайта
Обычно крупнее чем остальной текст.
Пример:
Корпорация монстров

Текстовое содержание

Навигация – обязательный элемент сайта.
При разработке сайта, убедитесь, что перемещение по

Способ оформления теста:
Один общий заголовок. Он должен быть самым крупным (тег
).
Крупные

).
Крупные

Тег TABLE служит контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит

HTML-списки представляют собой набор сгруппированных абзацев текста, помеченных значками или цифрами.
Виды

Маркированный список представляет собой неупорядоченный список.
Создается с помощью парного тега UL

Изображения – это визуальные элементы практически любого сайта.
Для отображения изображений в

Формат GIF – разработан в 1987 году.
Хранит до 256 цветов –

Формат PNG – создан в 1995 году.
Используется для публикации высококачественной растровой

Тег
Атрибуты:
src=”имя файла” – задается имя файла картинки.
Пример:
alt=”Текст надписи”

Пример:

При щелчке мышью на картинке

Работа с текстом:
font-family – название шрифта
font-size – размер шрифта
font-weight – жирность шрифта
font-style

Единицы измерения:
font-size: 2em – заданный шрифт будет в 2 раза больше шрифта

Задаем стиль текста:
В разметке страницы указываем стиль.
Как выглядит текст в браузере:
Каскадные таблицы

Работа с цветом:
color: red; – используем название цвета
color: rgb(255,0,0); – используем rgb
color:

Добавление таблиц стилей в проект
- после
Добавляем CssClass