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

Использование CSS-фреймворка 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, находится список языков программирования. В каждом из списков должно находится название языка и ссылка к соответствующей странице.Список необходимо оформить несколько раз:
  • На странице конкретного языка программирования (html-lang.html, css-lang.html, kotlin-lang.html) должно присутствовать:
    • Название языка программирования, в рамках заголовка h1.
    • Ссылка для возвращения к странице списка языка программирования. Ссылка должна быть оформлена:
    • Краткое описание назначения языка, в рамках которого есть h2-заголовок с текстом «Краткое описание», за которым идёт несколько параграфов, p-элементов, с соответствующим описанием.
    • Пример исходного кода, в рамках которого есть h2-заголовок с текстом «Пример исходного кода», за которым идёт форматированный текст внутри элемента code.

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

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

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

  1. Создайте каталог, в котором будут размещены файлы сайта. Можете использовать шаблон проекта Web в рамках JetBrains IDEA.
  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 в foundation-sample.html, чтобы был сохранён оригинальный файл с примерами.
  6. Скопируйте файл foundation-sample.html в файл template.html. В последнем подготовьте общий шаблон для других страниц. Данный шаблон должен содержать:
    1. Общее название для сайта.
    2. Общая навигационная панель сайта.
    3. Название языка в мета-информации сайта.
    4. Указание на кодировку сайта.
    5. Общую базовую сетку для размещения содержимого страниц.
  7. Скопируйте файл template.html в файл index.html и заполните его содержимым:
    1. Добавьте заголовок h1, включающий название «Языки программирования курса»
    2. После заголовка должны следовать параграфы с текстом задачи.
  8. Удостоверьтесь, что данные на странице отображаются корректно.
  9. Скопируйте файл template.htm в файл languages.html и заполните его содержимым:
    1. Добавьте заголовок h1, включающий текст «Языки программирования».
    2. Добавьте заголовок h2, включающий текст «Навигация в форме списка».
    3. Далее расположите ненумерованный список ul, внутри элементов которого, li, расположены ссылки на соответствующие страницы. Текст ссылки — название языка программирования. Лучше всего использовать относительные ссылки.
    4. Добавьте заголовок h2, включающий текст «Навигация в формате таблицы».
    5. После заголовка разместите таблицу с двумя колонками: «Название языка», «Ссылка на страницу с описанием». В первом столбце должно находиться название языка, а во втором столбце — ссылка с текстом «Ссылка».
    6. Добавьте заголовок h2, включающий текст «Навигация в формате карточек».
    7. После заголовка разместите три карточки, в заглавии которых находится название языка программирования. В качестве текста описания разместите текст «Информацию о языке можно прочитать по ссылке», где текст «по ссылке» является ссылкой на соответствующую страницу.
  10. Создайте каталог langs.
  11. Скопируйте файл template.html в файл langs/html-lang.html и заполните его содержимым:
    1. Исправьте пути к общим ресурсам, CSS и JavaScript-файлам, предоставленными вместе с
    2. Добавьте заголовок h1 с текстом «Язык программирования HTML».
    3. Добавьте блоковый элемент div, внутри которого расположите ссылки на страницу со списком языка программирования languages.html.
    4. Первая ссылка должна использовать только обычный элемент с содержимым «Назад к списку».
    5. Вторая ссылка должна быть оформлена в виде кнопки и содержать текст «Назад».
    6. Добавьте заголовок h2 с текстом «Краткое описание».
    7. Добавьте несколько параграфов и ненумерованных перечислений, описывающий данный язык программирования.
    8. Добавьте заголовок h2 с текстом «Пример исходного кода».
    9. Добавьте пример кода на данном языке программирования. Используйте элементы pre и code.
    10. Удостоверьтесь, что все элементы интерфейса выглядят корректно и переход между всеми тремя страницами работает корректно.
  12. Добавьте файл langs/css-lang.html, описывающий язык CSS.
  13. Добавьте файл langs/kotlin-lang.html, описывающий язык Kotlin.

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