Использование CSS-фреймворка Foundation

Использование CSS-фреймворка Foundation #

При разработке HTML-документов важной задачей является предоставление практичного и достаточно приятного для восприятия пользовательского интерфейса. Для решения этой задачи применяется отдельный язык CSS. Изучение данного языка не входит в рамки данного курса.

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

Документация #

Задача #

Вам необходимо разработать набор HTML-документов, которые описывают языки программирования, которые были упомянуты в данном курсе.

Логическая структура сайта #

flowchart LR index("index.html\nСтартовая страница") prog-langs("languages.html\nЯзыки программирования") html-lang("langs/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, находится несколько списков языков программирования с одинаковым содержимым, но разным оформлением. В каждом из списков должно находится название языка и ссылка к соответствующей странице. Список необходимо оформить следующими способами:
  • На странице конкретного языка программирования (html-lang.html, css-lang.html, kotlin-lang.html) должно присутствовать:
    • Название языка программирования, в рамках заголовка h1, https://get.foundation/sites/docs/typography-base.html#header.
    • Ссылка для возвращения к странице списка языка программирования. Ссылка должна быть оформлена:
    • Краткое описание назначения языка, в рамках которого есть h2-заголовок с текстом «Краткое описание», за которым идёт несколько параграфов, p-элементов, с соответствующим содержимым.
    • Пример исходного кода, в рамках которого есть h2-заголовок с текстом «Пример исходного кода», за которым идёт форматированный текст внутри элемента code, https://get.foundation/sites/docs/typography-base.html#code.

Требования к реализации #

  • На всех страницах должно присутствовать навигационное меню, https://get.foundation/sites/docs/top-bar.html, в рамках которого должны находиться ссылки на стартовую страницу и на страницу со списком языков программирования.
  • В рамках работы запрещается модифицировать CSS-стили у элементов внутри HTML-документа. Вместо этого необходимо использовать CSS-классы, предоставляемыми Foundation. Если данных классов недостаточно, то можно формировать собственные CSS-классы в отдельном CSS-файле.

Подход к реализации #

  1. Создайте каталог, в котором будут размещены файлы сайта.
  2. Скачайте шаблон CSS-проекта Foundation с главной страницы, https://get.foundation/.
  3. Распакуйте содержимое шаблона в каталог практической работы. После распаковки у вас в каталоге должны быть следующие файлы: 
    ./
├── css
│   ├── app.css
│   ├── foundation.css
│   └── foundation.min.css
├── index.html
└── js
    ├── app.js
    └── vendor
        ├── foundation.js
        ├── foundation.min.js
        ├── jquery.js
        └── what-input.js
  4. Откройте файл index.html и убедитесь, что все элементы оформлены верно.
  5. Исследуйте файл index.html. Определите как устроены следующие базовые элементы страницы:
    1. Сетка для расположения элементов.
    2. Оформление ссылок.
    3. Оформление выноски (callout).
  6. Переименуйте файл index.html в foundation-sample.html, чтобы был сохранён оригинальный файл с примерами.
  7. Скопируйте файл foundation-sample.html в файл template.html. В последнем подготовьте общий шаблон для других страниц. Данный шаблон должен содержать:
    1. Общее название для сайта.
    2. Общее навигационное меню сайта.
    3. Название языка в мета-информации сайта.
    4. Указание на кодировку символов документа.
    5. Общую базовую сетку для размещения содержимого страниц.
  8. Скопируйте файл template.html в файл index.html и заполните его содержимым:
    1. Добавьте заголовок h1, включающий название «Языки программирования курса»
    2. После заголовка должны следовать параграфы с текстом задачи.
  9. Удостоверьтесь, что данные на странице отображаются корректно.
  10. Скопируйте файл template.htm в файл languages.html и заполните его содержимым:
    1. Добавьте заголовок h1, включающий текст «Языки программирования».
    2. Добавьте заголовок h2, включающий текст «Навигация в форме списка».
    3. Далее расположите ненумерованный список ul, внутри элементов которого, li, расположены ссылки на соответствующие страницы. Текст ссылки — название языка программирования. Лучше всего использовать относительные ссылки.
    4. Добавьте заголовок h2, включающий текст «Навигация в формате таблицы».
    5. После заголовка разместите таблицу с двумя колонками: «Название языка», «Ссылка на страницу с описанием». В первом столбце должно находиться название языка, а во втором столбце — ссылка с текстом «Ссылка».
    6. Добавьте заголовок h2, включающий текст «Навигация в формате карточек».
    7. После заголовка разместите три карточки, в заглавии которых находится название языка программирования. В качестве текста описания разместите текст «Информацию о языке можно прочитать по ссылке», где текст «по ссылке» является ссылкой на соответствующую страницу.
  11. Создайте каталог langs.
  12. Скопируйте файл template.html в файл langs/html-lang.html и заполните его содержимым:
    1. Исправьте пути к общим ресурсам: CSS и JavaScript-файлам фреймворка Foundation.
    2. Добавьте заголовок h1 с текстом «Язык программирования HTML».
    3. Добавьте блоковый элемент div, внутри которого расположите ссылки на страницу со списком языка программирования languages.html.
    4. Первая ссылка должна использовать только обычный элемент с содержимым «Назад к списку».
    5. Вторая ссылка должна быть оформлена в виде кнопки и содержать текст «Назад».
    6. Добавьте заголовок h2 с текстом «Краткое описание».
    7. Добавьте несколько параграфов и ненумерованных перечислений, описывающий данный язык программирования.
    8. Добавьте заголовок h2 с текстом «Пример исходного кода».
    9. Добавьте пример кода на данном языке программирования. Используйте элементы pre и code.
    10. Удостоверьтесь, что все элементы интерфейса выглядят корректно и переход между всеми тремя страницами работает корректно.
  13. Добавьте файл langs/css-lang.html, описывающий язык CSS.
  14. Добавьте файл langs/kotlin-lang.html, описывающий язык Kotlin.
  15. Удостоверьтесь, что на всех страницах корректно подключаются файлы CSS-фреймворка Foundation, а также корректно происходит переход между HTML-документами.

© A. M. Васильев, 2023, CC BY-SA 4.0, andrey@crafted.su