Учебная практика по темам Верстка HTML, CSS

Начало проекта  шаблоны  Bootstrap Повторение пройденной темы

Тест

Назовите виды сайтов

Виды сайтов

Лендинг

Лендинг (landing page), или посадочная страница — это одностраничный сайт или страница сайта, которая продвигает конкретное предложение. Пользователю нужно что-то сделать, чтобы воспользоваться этой услугой или товаром: купить, подписаться, зарегистрироваться. Сделать это пользователь может с помощью заполнения формы сбора контактов.

Цель лендинга — сфокусировать пользователя на одном предложении (конкретной услуге или товаре). Потому вся информация на лендинге продает этот товар. На нем используется один ключевой призыв к действию.

Сайт-визитка

•        Сайт-визитка (англ. business card website) — небольшой сайт, как правило, состоящий из одной (или нескольких) веб-страниц и содержащий основную информацию об организации, частном лице, компании, товарах или услугах, прейскуранты, контактные данные.

•        Часто сайт-визитку используют компании, которые не хотят нести большие затраты на создание отдельного сайта. Очень часто при покупке доменного имени для почты устанавливается сайт-заглушка или сайт-визитка.

Шаблоны на Bootstrap

Что понимается под списком требований к сайту?

Начало проекта

Поиск шаблона

Настройка шаблона в браузере

Задание_1_Создать на основе шаблона

Bootstrap страницу сайта

1.            Открыть сайт для начала:  https://startbootstrap.com/

2.            Выбрать шаблон Bootstrap;

3.            Запустить просмотр на разных устройствах;

4.           

Скачать шаблон;

5.            Открыть шаблон;

6.            Нажать на кнопку Start Bootstrap 

7.            Редактировать шаблон на выбранную тему

(Наш техникум, Наша группа, WorldSkills

Сахалинской области, WorldSkills  ГБПОУ СТОТиС)

8.            Сохранить в папке

Самостоятельная работа

1.    

Создайте страницу сайта-визитки. Напишите некоторый текст в разделе "Об авторе". 

2.     Задание для продвинутых:

 Сделайте это на странице редактора

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

Тема:

Начало проекта

1.           Составить список требований к сайту

ØПросмотреть шаблоны сайтов по выбранной теме;

ØЧто должно быть на этом сайте;

ØКакие требования к сайту;

2.           Поиск подходящего шаблона

Оценивание проекта

1.              Создать адаптивный мобильный сайт с помощью Bootstrap и стартовой страницей;

2.              На странице использовать адаптивную систему сетки Bootstrap;

3.              На странице использовать готовые компоненты Bootstrap.

4.              Обязательные элементы и компоненты на странице:

a)        b) c) d) e) f) g)

Форма; Текст (стиль, кегль); Оповещение; Ссылки; Кнопки; Карточки; Использование сетки.

a)         Раскрывающиеся списки b)        Группа кнопок; Приветствуется самостоятельное изучение компонентов

Эскиз страницы

Создайте структуру страницу сайта, распределите информацию 

Название сайта

Изображение, текст, таблица Запишите распределение колонок например: <div class=“col-sm-4 col-md-8” >

Форма, ссылки

Название 

прайс

прайс

прайс

футер