Использование CSS-фреймворка Foundation #
Документация #
- Официальная документация для сайтов
- Официальный сайт фреймворка Foundation
- Официальный канал ZURB, разработчика фреймворка Foundation
- Урок 155. Обзор CSS фреймворка Zurb Foundation
Видео запись лекции #
Данная лекция включает в себя описание по настройке и запуску HTTP-сервера. Эту часть записанного видео можно игнорировать.
Задача #
Вам необходимо разработать набор HTML-документов, которые описывают языки программирования, которые были упомянуты в данном курсе.
Логическая структура сайта #
flowchart LR index("index.html\nСтартовая страница") prog-langs("languages.html\nЯзыки программирования") html-lang("html-lang.html\nЯзык разметки HTML") css-lang("langs/css-lang.html\nЯзык стилизации CSS") kotlin-lang("langs/kotlin-lang.html\nЯзык Kotlin") index --- prog-langs prog-langs --- html-lang prog-langs --- css-lang prog-langs --- kotlin-lang
- На стартовой странице,
index.html
, находится краткое описание задачи. - На странице со списком языков программирования,
languages.html
, находится список языков программирования. В каждом из списков должно находится название языка и ссылка к соответствующей странице.Список необходимо оформить несколько раз:- С помощью ненумерованного списка: https://get.foundation/sites/docs/typography-base.html#unordered-lists.
- С помощью таблиц: https://get.foundation/sites/docs/table.html.
- С помощью карточек: https://get.foundation/sites/docs/card.html.
- На странице конкретного языка программирования (
html-lang.html
,css-lang.html
,kotlin-lang.html
) должно присутствовать:- Название языка программирования, в рамках заголовка
h1
. - Ссылка для возвращения к странице списка языка программирования. Ссылка должна быть оформлена:
- Как обыкновенная ссылка с текстом: https://get.foundation/sites/docs/typography-base.html#unordered-lists.
- Как кнопка: https://get.foundation/sites/docs/button.html.
- Краткое описание назначения языка, в рамках которого есть
h2
-заголовок с текстом «Краткое описание», за которым идёт несколько параграфов,p
-элементов, с соответствующим описанием. - Пример исходного кода, в рамках которого есть
h2
-заголовок с текстом «Пример исходного кода», за которым идёт форматированный текст внутри элементаcode
.
- Название языка программирования, в рамках заголовка
Требования к реализации #
- На всех страницах должно присутствовать навигационное меню, https://get.foundation/sites/docs/top-bar.html, в рамках которого должны находиться ссылки на стартовую страницу и на страницу со списком языков программирования.
- В рамках работы запрещается модифицировать CSS-стили напрямую. Вместо этого необходимо использовать CSS-классы, предоставляемыми Foundation.
Подход к реализации #
- Создайте каталог, в котором будут размещены файлы сайта. Можете использовать шаблон проекта
Web
в рамках JetBrains IDEA. - Скачайте шаблон CSS-проекта Foundation с главной страницы, https://get.foundation/.
- Распакуйте содержимое шаблона в каталог практической работы. После распаковки у вас в каталоге должны быть следующие файлы:
./ ├── css │ ├── app.css │ ├── foundation.css │ └── foundation.min.css ├── index.html └── js ├── app.js └── vendor ├── foundation.js ├── foundation.min.js ├── jquery.js └── what-input.js
- Откройте файл
index.html
и убедитесь, что все элементы оформлены верно. - Переименуйте файл
index.html
вfoundation-sample.html
, чтобы был сохранён оригинальный файл с примерами. - Скопируйте файл
foundation-sample.html
в файлtemplate.html
. В последнем подготовьте общий шаблон для других страниц. Данный шаблон должен содержать:- Общее название для сайта.
- Общая навигационная панель сайта.
- Название языка в мета-информации сайта.
- Указание на кодировку сайта.
- Общую базовую сетку для размещения содержимого страниц.
- Скопируйте файл
template.html
в файлindex.html
и заполните его содержимым:- Добавьте заголовок
h1
, включающий название «Языки программирования курса» - После заголовка должны следовать параграфы с текстом задачи.
- Добавьте заголовок
- Удостоверьтесь, что данные на странице отображаются корректно.
- Скопируйте файл
template.htm
в файлlanguages.html
и заполните его содержимым:- Добавьте заголовок
h1
, включающий текст «Языки программирования». - Добавьте заголовок
h2
, включающий текст «Навигация в форме списка». - Далее расположите ненумерованный список
ul
, внутри элементов которого,li
, расположены ссылки на соответствующие страницы. Текст ссылки — название языка программирования. Лучше всего использовать относительные ссылки. - Добавьте заголовок
h2
, включающий текст «Навигация в формате таблицы». - После заголовка разместите таблицу с двумя колонками: «Название языка», «Ссылка на страницу с описанием». В первом столбце должно находиться название языка, а во втором столбце — ссылка с текстом «Ссылка».
- Добавьте заголовок
h2
, включающий текст «Навигация в формате карточек». - После заголовка разместите три карточки, в заглавии которых находится название языка программирования. В качестве текста описания разместите текст «Информацию о языке можно прочитать по ссылке», где текст «по ссылке» является ссылкой на соответствующую страницу.
- Добавьте заголовок
- Создайте каталог
langs
. - Скопируйте файл
template.html
в файлlangs/html-lang.html
и заполните его содержимым:- Исправьте пути к общим ресурсам, CSS и JavaScript-файлам, предоставленными вместе с
- Добавьте заголовок
h1
с текстом «Язык программирования HTML». - Добавьте блоковый элемент
div
, внутри которого расположите ссылки на страницу со списком языка программированияlanguages.html
. - Первая ссылка должна использовать только обычный элемент с содержимым «Назад к списку».
- Вторая ссылка должна быть оформлена в виде кнопки и содержать текст «Назад».
- Добавьте заголовок
h2
с текстом «Краткое описание». - Добавьте несколько параграфов и ненумерованных перечислений, описывающий данный язык программирования.
- Добавьте заголовок
h2
с текстом «Пример исходного кода». - Добавьте пример кода на данном языке программирования. Используйте элементы
pre
иcode
. - Удостоверьтесь, что все элементы интерфейса выглядят корректно и переход между всеми тремя страницами работает корректно.
- Добавьте файл
langs/css-lang.html
, описывающий язык CSS. - Добавьте файл
langs/kotlin-lang.html
, описывающий язык Kotlin.