Проектирование и веб-разработка

Тема: Представление сайта, который будет разработан на протяжении курса

Основные идеи этого урока:

- пример веб-сайта, который можно было бы разработать с помощью технологий, которые
изучим на данном курсе;
- определение понятий «адаптивный дизайн» сайта и «гамбургер-меню»;
- определение понятия слайдер и для чего он может быть использован на сайте;
- рекомендации по структурированию файлов, необходимых для разработки веб-сайта.

Таким образом, на этом уроке мы разберем пример сайта, который можно будет
разработать по завершению курса «Проектирование и веб-разработка».
Было принято решение создать сайт, который представляет маленькое кафе,
предлагающее своим клиентам вкусный кофе. Это кафе было названо «Coffee Time».
Из-за того, что когда кто-то думает о кофе, происходит ассоциация с коричневым или
шоколадным цветом, было принято решение использовать в качестве преобладающего
цвета для сайта - коричневый. На страницах сайта будет использован не самый простой
шрифт. Я возьму один из шрифтов с сайта https://fonts.google.com/. На этом сайте ты
сможешь найти еще много нестандартных, особенных шрифтов. Можешь зайти и узнать,
что предлагает этот сайт!
Как уже было сказано на предыдущем уроке, стартовая страница является наиболее
важной на веб-сайте, потому что это первое, что видит пользователь после ввода в
адресной строке веб-браузера доменного имени сайта. Стартовая страница – на
английском HOME PAGE - должна привлекать внимание пользователя.
Можно представить её эскиз в виде изображения: в заголовке (на английском header)
страницы будет, по горизонтали, небольшое изображение, называемое логотипом, и три
опции, составляющие верхнее меню. Эти опции позволят пользователю легче получить
доступ к одному из трех основных компонентов стартовой страницы, щелкнув на одну из
них:
Проектирование и веб-разработка

● Общая информация о кофе, будет

доступна тогда когда пользователь
щёлкнет на опцию «Информация о
компании»,
● Основные товары, предложенные
клиентам кафе – будут доступны при
нажатии на опцию «Продукция»,И
компонент в который представлены
основные контактные данные кафе,
вместе с интерактивной картой –
будет доступен пользователю при
нажатии на опцию «Контакты».
Перейдем к другому разделу... думаю вы
уже заметили что сегодня пользователи
используют различные устройства для
доступа к веб-сайтам, и очень важно, чтобы
меню, а также всё содержимое веб-сайтов
адаптировалось к экранам этих устройств.
Таким образом, определим понятие отзывчивого или адаптивного дизайна, которое на
английском языке называется «responsive design». Это понятие предполагает
использование HTML, CSS и JavaSсript для изменения размеров, скрытия, сжатия или
увеличения элементов веб-сайта, так чтобы их содержимое выглядело хорошо на всех
устройствах, которые мог бы использовать пользователь: персональные компьютеры с
настольными экранами, планшеты, телефоны, телевизоры и др.
Следовательно, верхнее меню, а также остальной контент нашего сайта должны быть
адаптивными (см. видео site_presentation.mp4).
Обратите внимание что на большом экране видны все опции верхнего меню:

Когда меню появится на экране смартфона, оно не будет отображатся полностью, так как
он был представлен на большом экране. В случае маленького экрана вместо меню будем
использовать специальный символ, называемый «гамбургер», который выглядит вот так

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

Проектирование и веб-разработка

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

нажмет на кнопку :

или
Далее, после заголовка страницы, следует основной контент страницы.
Итак, под основным меню, на главной странице будет добавлен слайдер. Так же, вместо
него можно разместить красивое изображение, которое максимально наглядно
представляет основное действие организации – в нашем случае кафе.
А что такое слайдер? В веб-дизайне термин «слайдер» используется для
последовательного представления слайдов на веб-странице. Слайд является составной
частью слайдера и может содержать простые изображения или изображения с короткими
текстами. Слайдер анимирует домашнюю страницу. Презентация слайдов может
выполняться автоматически, то есть без участия пользователя, или слайды могут быть
изменены пользователем собственноручно.
Данный слайдер будет состоять из 4 слайдов, и каждый слайд имеет в основе фотографию
какого-то продукта, на которой, внизу, есть короткий текст, а в правом верхнем углу -
номер слайда. Пример слайда показан на изображении. Обратите внимание, что это
первый слайд из 4.
Проектирование и веб-разработка

После слайдера следует общий информативный текст, в котором описывается кофейная

продукция, которую готовит представленное кафе.
Проектирование и веб-разработка

Ниже, под текстовым описанием, будут кратко представлены 3 самых востребованных

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

Далее следует контактная информация и местоположение: физический адрес, адрес

электронной почты и номер телефона кафе, а рядом с ними будет размещена
интерактивная карта, взятая с maps.google.com, которая может помочь пользователю
найти местоположение более легко – увеличив или уменьшив масштаб карты.
Проектирование и веб-разработка

Внизу стартовой страницы, а также и на других дополнительных страницах, будет

расположен «нижний колонтитул», который по-английски называется «footer». Он будет
содержать информацию об авторских правах, текущий год, адрес электронной почты
разработчика. Можно дополнить и другими данными эту компоненту.

Далее рассмотрим набор файлов и папок, необходимых для выполнения этого проекта...
Папка проекта была названа PROJECT. Внутри этой родительской папки была создана
иерархия папок и файлов, необходимая для правильной реализации проекта.
Необходимо знать и запомнить, что хранить все файлы в одной папке - нехорошо.
Итак, в родительской папке PROJECT, была создана папка с названием CSS, чтобы хранить
в ней все файлы со стилями. В папке IMAGES будут храниться все необходимые для проекта
изображения. Если понадобится много изображений – можно создать несколько
подкаталогов, чтобы группировать изображения и упростить их поиск. В папке JS будет
сохранён весь необходимый JavaScript, а в папке PAGES - файлы, которые определяют
второстепенные веб-страницы, подробно описывающие продукты кафе. Как упоминалось
ранее, будут созданы 3 дополнительные страницы, помимо основной, на которых более
подробно будут описаны каждый из 3 продуктов, предлагаемых кафе своим клиентам:
капучино, латте и эспрессо. Вот эти 3 файла, определяющие эти страницы, которые будут
храниться в папке PAGES.

Файл index.html – определяет стартовую страницу веб-сайта и будет размещен

непосредственно в родительскую папку - PROJECT.
Завершим тут наш урок... вспомним основные идеи и понятия высказанные сегодня:
Проектирование и веб-разработка

● Сайт может состоять из одной страницы, имея в основе и несколько компонент, или
же сайт может состоять из нескольких страниц. Когда на сайте несколько страниц,
всегда должна быть одна основная, называемая «ГЛАВНОЙ» или «СТАРТОВОЙ»
страницей;
● Рекомендуется, чтобы весь контент на страницах веб-сайта адаптировался к экрану
устройства. То есть пользователю должно быть удобно заходить на сайт не только с
компьютера, но и со смартфона;
● Набор файлов, на основе которых создается сайт, должен быть правильно
структурирован, чтобы мы всегда знали, где эти файлы хранятся и как к ним можно
получить доступ.

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