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

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

План сегодняшнего занятия:

Повторим материал прошлого урока
Познакомимся с заказчиком сайта и получим

Попробуйте соотнести теги, с тем что они делают

H1 a) Задаёт верхнюю

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

Техническое задание от заказчика

Обычно техническое задание (сокращенно ТЗ) от заказчика более

Figma

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

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

Figma

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

Figma

Загружаем файл макета от заказчика

Добавляем наш макет в фигма и

Figma

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

Дополнительное задание

Посетите официальный сайт шаблонов сайтов от figma, попробуйте поработать с

Исправим наш сайт

Поменяем в style.css у тега body свойство background

Div элементы

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

Div элементы

На примере нашего сайта

Div элементы

Добавим div-элементы в html - документ

Сохраняем проект и тестируем в

Div элементы

Ничего не изменилось

Классы

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

Классы в CSS

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

Классы в CSS

Смотрим в figma на свойства логотипа и применяем font-family,

Закрепим понятие контейнеров
Попробуйте самостоятельно посчитать, сколько всего контейнеров на нашем макете.

Работа со шрифтами

font-family - Устанавливает семейство шрифта, которое будет использоваться для

Работа со шрифтами

font-style - Определяет начертание шрифта: обычное, курсивное или наклонное.

Значения
normal

Работа со шрифтами

font-weight - Устанавливает насыщенность шрифта. Значение устанавливается от 100

Работа со шрифтами

cursor - устанавливает форму курсора, когда он находится в

cursor : pointer

Работа со шрифтами

Шрифт нашего лого не изменился, т.к. такой шрифт не

Работа со шрифтами

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

Работа со шрифтами

Выбираем regular 400, нажимаем select this style

Работа со шрифтами

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

Работа со шрифтами

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

Работа со шрифтами

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

Дополнительное задание

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

Самостоятельное задание 1

Необходимо для меню создать class=”header_menu” и добавить ему шрифт

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

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

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

Wordpress - одна из самых популярных

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

Drupal- чуть менее популярная система

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

1С битрикс - российская CMS

Расположение div элементов

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

Flexbox

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

Flexbox

Добавим свойство display в CSS, и установим значение flex - чтобы

Тестируем

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

Свойство margin

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

Свойство margin

Кликнем два раза на логотип, и переведем указатель мыши на

Отступы

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

Задаем отступы для нашего логотипа

Отступы берем из макета figma

Тестируем

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

Самостоятельное задание 2

Необходимо добавить отступы для блока меню header_menu.
Отступ слева

Проверяем

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

Проверяем на сайте

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

Тег ссылки - Ссылка

Обернем наши пункты меню в тег , и

Свойство padding

padding - устанавливает значение полей вокруг содержимого элемента. Полем

Свойство padding

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

Свойство padding

Зададим отступы тегу , в соответствии с макетом

Тестируем на сайте

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

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

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

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

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

Разобрались с div элементами и классами

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

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

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

Научились применять правила стиля к классам и познакомились

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

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

Расскажи о нас друзьям

Получи подарочную карту STEAM на 750 р. или