9.48M

Категория:

Интернет

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

1.

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

2.

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

Попробуйте соотнести теги, с тем
что они делают
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 - Наследует значение родителя.