Второй урок по web программированию

1.

Добро пожаловать
На второй урок по web
программированию
Академия программирования для детей

2.

План сегодняшнего занятия:
1. Повторим материал прошлого урока
2. Познакомимся с заказчиком сайта и получим техническое задание
3. Познакомимся с div элементами
4. Сделаем header сайта

3.

Повторим пройденное

4.

Что такое тег?

5.

Попробуйте соотнести теги, с тем
что они делают
1. H1
a) Задаёт верхнюю секцию в структуре сайта
2. P
б) Делает из текста заголовок
3. Header
в) Тег ссылка, для привязки ресурсов и файлов
4. Link
г) Задает абзац

6.

Чем парные теги отличаются от
одинарных?
Какие парные и одинарные теги
вы помните?

7.

Что тут не так?

8.

Получаем техническое задание

9.

Техническое задание от заказчика
Обычно техническое задание (сокращенно ТЗ) от
заказчика более объемное.
Оно содержит информацию об основных разделах
сайта и пожелания по исполнению (технологии,
библиотеки, сроки и изображения)

10.

Figma
FIGMA - Программа используемая дизайнерами для разработки WEB интерфейсов

11.

Поделитесь экраном с преподавателем

12.

Figma
Скачиваем файл макета от заказчика

13.

Figma
Загружаем файл макета от заказчика
Добавляем наш макет в фигма и
открываем

14.

Figma
Двойным щелчком открываем на макет

15.

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

16.

Исправим наш сайт
Поменяем в style.css у тега body свойство background

17.

Div элементы
Блоки, контейнеры для контейнера

18.

Div элементы
На примере нашего сайта

19.

Div элементы
Добавим div-элементы в html - документ
Сохраняем проект и тестируем в браузере

20.

Div элементы
Ничего не изменилось

21.

Классы
Добавим класс header_logo к
div-элементу логотипа

22.

Классы в CSS
Чтобы обратиться к классу
через CSS, ставим перед его
названием ТОЧКУ
.header_logo{
}

23.

Классы в CSS
Смотрим в figma на свойства логотипа и применяем font-family, font-style и font-weight
Дополнительно пишем свой свойство cursor: pointer

24.

Дополнительное задание
Закрепим понятие контейнеров
Попробуйте самостоятельно посчитать, сколько всего
контейнеров на нашем макете.
К примеру, на картинке справа(верхняя часть нашего
сайта) явно видно 6 контейнеров.

25.

Работа со шрифтами
font-family - Устанавливает семейство шрифта, которое будет использоваться для оформления
текста содержимого
Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

26.

Работа со шрифтами
font-style - Определяет начертание шрифта: обычное, курсивное или наклонное.
Значения
normal - Обычное начертание текста.
italic - Курсивное начертание.
oblique - Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это
специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
inherit - Наследует значение родителя.

27.

Работа со шрифтами
font-weight - Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900
с шагом 100
Значения
bold — полужирное начертание
normal — нормальное начертание.
Также допустимо использовать условные единицы от 100 до 900

28.

Работа со шрифтами
cursor - устанавливает форму курсора, когда он
находится в пределах элемента.

29.

cursor : pointer

30.

Работа со шрифтами
Шрифт нашего лого не изменился, т.к. такой шрифт не установлен на нашем сайте.
Его нужно подключить отдельно

31.

Работа со шрифтами
Ищем на сайте Google Fonts шрифт Revalia

32.

Работа со шрифтами
Выбираем regular 400, нажимаем select this style

33.

Работа со шрифтами
Копируем ссылку на шрифт и переносим в
проект

34.

Работа со шрифтами
Добавляем скопированный фрагмент кода в head сайта, сохраняем проект и проверяем на
сайте

35.

Работа со шрифтами
Отлично! Шрифт логотипа изменился на Revalia

36.

Дополнительное задание
Добавьте самостоятельно любой понравившийся стиль текста с google-fonts на наш сайт

37.

Самостоятельное задание 1
Необходимо для меню создать class=”header_menu” и добавить ему шрифт из проекта figma.
А также свойство cursor:pointer

38.

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

39.

Научно популярная пауза

40.

Системы управления содержимым - CMS системы

41.

Системы управления содержимым - CMS системы
Wordpress - одна из самых популярных
CMS систем в мире

42.

Системы управления содержимым - CMS системы
Drupal- чуть менее популярная система

43.

Системы управления содержимым - CMS системы
1С битрикс - российская CMS

44.

Расположение div элементов
Наше меню должно идти в строчку, после логотипа

45.

Flexbox
Привязка элементов на сайте к линии (горизонтальной \ вертикальной)

46.

Flexbox
Добавим свойство display в CSS, и установим значение flex - чтобы привязать все
элементы к линии (по умолчанию горизонтальной)

47.

Тестируем
Теперь и логотип и меню привязаны к горизонтальной линии

48.

Свойство margin
margin - устанавливает величину отступа от каждого
края элемента.
Отступом является пространство от границы
текущего элемента до внутренней границы его
родительского элемента

49.

Свойство margin
Кликнем два раза на логотип, и переведем указатель мыши на блок-родитель. В оранжевых
блоках будут указаны значения отступа в px. Отступ слева 402 px, сверху 57

50.

Отступы
Название отступов с каждой из сторон

51.

Задаем отступы для нашего логотипа
Отступы берем из макета figma

52.

Тестируем
Сохраняем проект и проверяем в браузере. Логотип ушел ближе к центру

53.

Самостоятельное задание 2
Необходимо добавить отступы для блока меню header_menu.
Отступ слева равен 398 px, сверху 79 px

54.

Проверяем
Добавлены два отступа для блока меню

55.

Проверяем на сайте
Необходимо сохранить сайт и протестировать в браузере

56.

Тег ссылки - <a>Ссылка</a>
Обернем наши пункты
меню в тег <a>, и сделаем
их отдельными ссылками

57.

Свойство padding
padding - устанавливает значение полей вокруг содержимого элемента. Полем называется
расстояние от внутреннего края рамки элемента до воображаемого прямоугольника,
ограничивающего его содержимое

58.

Свойство padding
padding можно сравнить с рамкой у картины

59.

Свойство padding
Зададим отступы тегу <a>, в
соответствии с макетом

60.

Тестируем на сайте
Теперь у каждого элемента <a> внутренний отступ слева 42 пикселя

61.

Что мы сделали сегодня?

62.

Что мы сделали сегодня
Познакомились с заказчиком, получили техническое задание и макет, научились
работать с Figma

63.

Что мы сделали сегодня
Разобрались с div элементами и классами

64.

Что мы сделали сегодня
Научились менять расположение div-элементов

65.

Что мы сделали сегодня
Научились применять правила стиля к классам и познакомились со многими
новыми CSS свойствами

66.

Что мы сделали сегодня
Сделали header нашего сайта, как на макете!

67.

Расскажи о нас друзьям
Получи подарочную карту STEAM на 750 р. или 1
бесплатный урок программирования за каждого друга,
который пройдет открытый урок в нашей школе и
оплатит обучение

68.

До встречи на следующем уроке