Верстка и веб-дизайн. 3 курс. Практическое занятие №7. Foundation верстка макета новостного сайта

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

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

Рекомендуемая тема для корректного отображения задания - Contempo Light.

HTML

1) Открываем html, указываем масштаб страницы и заголовок вкладки:

<html class="no-js" lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Foundation Layout</title>

2) Встраиваем библиотеку Foundation. Взять ее можно здесь:

https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css

3) Закрываем </head>

4) Открываем блок меню:

<header> 

5) Задаем верхнее меню со вкладками. Пропишите в них свои названия:

<div class="top-bar">

<div class="top-bar-left">

<ul class="menu">

<li><a href="#">Вкладка 1</a></li>

<li><a href="#">Вкладка 2</a></li>

<li><a href="#">Вкладка 3</a></li>

<li><a href="#">Вкладка 4</a></li>

</ul>

</div>

6) Задаем кнопку поиска справа:

<div class="top-bar-right">

<ul class="menu">

<li><input type="search" placeholder="Search"></li>

<li><button type="button" class="button">Search</button></li>

</ul>

</div>

</div>

7) Отделяем верхние элементы и создаем блок меню для маленьких экранов (оно будет видно со смартфона):

<br>

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">

<button class="menu-icon" type="button" data-toggle></button>

<div class="title-bar-title">Menu</div>

</div>

8) Задаем блок из нижнего меню и раскрывающихся субменю. Дайте свои названия всем вкладкам. Вкладка первая:

<div class="top-bar" id="main-menu">

<ul class="menu vertical medium-horizontal expanded medium-text-center" data-responsive-menu="drilldown medium-dropdown">

<li class="has-submenu"><a href="#">вкладка 1</a>

<ul class="submenu menu vertical" data-submenu>

<li><a href="#">субменю 1</a></li>

<li><a href="#">субменю 2</a></li>

<li><a href="#">субменю 3</a></li>

</ul>

</li>

9) Вторая:

<li class="has-submenu"><a href="#">вкладка 2</a>

<ul class="submenu menu vertical" data-submenu>

<li><a href="#">субменю 1</a></li>

<li><a href="#">субменю 2</a></li>

<li><a href="#">субменю 3</a></li>

</ul>

</li>

10) Третья:

<li class="has-submenu"><a href="#">вкладка 3</a>

<ul class="submenu menu vertical" data-submenu>

<li><a href="#">субменю 1</a></li>

<li><a href="#">субменю 2</a></li>

<li><a href="#">субменю 3</a></li>

</ul>

</li>

11) Четвертая:

<li class="has-submenu"><a href="#">вкладка 4</a>

<ul class="submenu menu vertical" data-submenu>

<li><a href="#">субменю 1</a></li>

<li><a href="#">субменю 2</a></li>

<li><a href="#">субменю 3</a></li>

</ul>

</li>

12) Пятая:

<li class="has-submenu"><a href="#">вкладка 5</a>

<ul class="submenu menu vertical" data-submenu>

<li><a href="#">субменю 1</a></li>

<li><a href="#">субменю 2</a></li>

<li><a href="#">субменю 3</a></li>

</ul>

</li>

13) Шестая:

<li class="has-submenu"><a href="#">вкладка 6</a>

<ul class="submenu menu vertical" data-submenu>

<li><a href="#">субменю 1</a></li>

<li><a href="#">субменю 2</a></li>

<li><a href="#">субменю 3</a></li>

</ul>

</li>

</ul>

</div>

14) Закрываем </header> и открываем <body>

15) Создаем класс упаковки, отделяем его от первого блока верстки

<div id="wrap">

<br>

<hr>

16) Открываем класс первого ряда, указываем заголовок раздела:

<div class="row column">

  <h4 style="margin: 0;" class="text-center">ВАШ ЗАГОЛОВОК РАЗДЕЛА</h4>

</div>

<div>

17) Вновь отделяем блок, создаем колоночный макет с пиктограммами публикаций. Подключите ваши картинки из репозитория:

<hr>

<div class="row small-up-3 medium-up-4 large-up-5">

  <div class="column">

    <a href="#"><img src="пиктограмма" alt="image for article"></a>

  </div>

  <div class="column">

    <a href="#"><img src="пиктограмма" alt="image for article"></a>

  </div>

  <div class="column">

    <a href="#"><img src="пиктограмма" alt="image for article"></a>

  </div>

  <div class="column show-for-medium">

    <a href="#"><img src="пиктограмма" alt="image for article"></a>

  </div>

  <div class="column show-for-large">

    <a href="#"><img src="пиктограмма" alt="image for article"></a>

  </div>

</div>


18) Создаем заголовочную часть основного блока со статьями, также отделяя его от предыдущего элемента:

<hr>

<div class="row column">

  <h4 style="margin: 0;" class="text-center">ЗАГОЛОВОК НОВОСТНОЙ ЛЕНТЫ</h4>

</div>

<hr>

<div class="row">

  <div class="large-8 columns" style="border-right: 1px solid #E3E5E8;">

  <article>

19) Создаем блок новости. В моем примере он один, у вас их должно быть пять. Замените все тексты на свои (заголовок, лидер-абзац, автор, дата), также укажите путь к иллюстрации:

<div class="row">

<div class="large-6 columns">

<p><img src="фото к новости" alt="image for article" alt="article preview image"></p>

</div>

<div class="large-6 columns">

<h5><a href="#">Заголовок</a></h5>

<p>

<span><i class="fi-torso">Автор</i></span>

<span><i class="fi-calendar"> 25/04/25</i></span>

<span><i class="fi-comments"> 1 комментарий</i></span>

</p>

<p>Лидер-абзац.</p>

</div>

</div>

20) Отделите статью от следующей с помощью тега <hr> и повторите так пять раз (в том числе после последнего блока статьи).

21) Добавляем блок постраничной навигации:

<ul class="pagination" role="navigation" aria-label="Pagination">

<li class="disabled">Previous <span class="show-for-sr">page</span></li>

<li class="current"><span class="show-for-sr">You're on page</span> 1</li>

<li><a href="#" aria-label="Page 2">2</a></li>

<li><a href="#" aria-label="Page 3">3</a></li>

<li><a href="#" aria-label="Page 4">4</a></li>

<li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>

</ul>

22) Закрываем блок статей и класс раздела:

</article>

</div>

23) Открываем боковую панель и указываем заголовок раздела:

<aside>

<br>

<div class="row column">

<p class="lead">ЗАГОЛОВОК РАЗДЕЛА</p>

24) Открываем блок секции популярных статей. Ниже - пример с одним, у вас их должно быть пять. Укажите здесь ваш заголовок и фото:

<div class="media-object">

<div class="media-object-section">

<img class="thumbnail" src="ваше фото">

</div>

 <div class="media-object-section">

<a href="#"><h5>Заголовок</h5></a>

</div>

</div>

25) Закрываем раздел:

</div>

</aside>

</div>

26) Задаем футер, укажите в нем ваш заголовок и текст описания:

<footer>

<div class="row expanded callout secondary">

<div class="large-4 columns">

<h5>ВАШ ЗАГОЛОВОК</h5>

<p>Ваш текст описания.</p>

</div>

</div>

27) Добавляем блок контактов в футере (укажите ваше название вкладок)

<div class="row expanded">

<div class="medium-6 columns">

<ul class="menu">

<li><a href="#">вкладка 1</a></li>

<li><a href="#">вкладка 2</a></li>

<li><a href="#">вкладка 3</a></li>

</ul>

</div>

28) И блок копирайта (укажите ваш текст):

<div class="medium-6 columns">

<ul class="menu align-right">

<li class="menu-text">Copyright © 2025 News Portal</li>

</ul>

</div>

</div>

29) Закрываем футер </footer>

30) Встраиваем библиотеку JavaScript и динамическую Foundation библиотеку:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>

31) Задаем функцию выполнения JavaScript:

<script>

$(document).foundation();

</script>

32) Закрываем </body> и </html>

Основной макет готов. Теперь нужно задать его стиль. 

Напишите CSS самостоятельно. Вам нужно:

33) создать селектор блока header и указать его фоновый цвет;

34) создать селектор блока footer и указать его фоновый цвет;

35) создать класс блока title-bar и указать его фоновый цвет;

36) создать идентификатор блока wrap и указать его фоновый цвет;

37) создать слитый (без пробелов) класс класса класса submenu menu vertical и указать его фоновый цвет;

38) создать слитый (без пробелов) класс класса класса класса row expanded callout secondary и указать его фоновый цвет; 

39) Если все верно, то ваш макет страницы будет выглядеть примерно так: https://konoplevtech4.blogspot.com/2025/04/foundation-layout.html

При этом в мобильной версии макет будет отличаться появлением раскрывающегося меню.

Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 26 апреля.


Комментарии

  1. Настя25 апреля 2025 г. в 00:26

    Анастасия Федякина https://nastuuuuuushk.blogspot.com/2025/04/3-7-foundation.html

    ОтветитьУдалить
  2. Алина Исламова25 апреля 2025 г. в 00:32

    Прошлые практики: https://linislamova.blogspot.com/2025/04/5.html
    https://linislamova.blogspot.com/2025/04/6.html

    Эта практика: https://linislamova.blogspot.com/2025/04/7.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn25 апреля 2025 г. в 02:09

      Долги - "хорошо", текущее задание не принято, у вас отсутствует блок компонентов, указанный в пункте 24. Жду исправленный вариант.

      Удалить
  3. Kristina Smotrova25 апреля 2025 г. в 00:47

    https://smotrikisa.blogspot.com/2025/04/roma-news-page-1-page-2-page-3-page-4_25.html
    Долг за предыдущую практику: https://smotrikisa.blogspot.com/2025/04/giogio-vento-auero.html

    ОтветитьУдалить
  4. Елизавета Ухарских, ФЖ-20125 апреля 2025 г. в 00:57

    https://elizavetauharskih25.blogspot.com/2025/04/7.html

    ОтветитьУдалить
  5. Яна Петривная25 апреля 2025 г. в 06:03

    https://yanniiish.blogspot.com/2025/04/7.html

    ОтветитьУдалить
  6. Дарья Васильева25 апреля 2025 г. в 11:13

    https://huhanochka.blogspot.com/2025/04/praktika-7.html

    ОтветитьУдалить
  7. Daniil25 апреля 2025 г. в 14:35

    Шагивалеев

    https://danyashagivaleyevlll.blogspot.com/2025/04/7.html

    ОтветитьУдалить
  8. Полина Горбунова ФЖ-30126 апреля 2025 г. в 01:13

    https://polinagorbunova.blogspot.com/2025/04/25042025.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn26 апреля 2025 г. в 08:36

      Оценка "хорошо", неверно указаны слитые классы

      Удалить
  9. Коваленко Влад ФЖ-20226 апреля 2025 г. в 02:57

    Прошлые практики
    https://kovalvlad369.blogspot.com/2025/03/css-html-html-tiles-layout.html
    https://kovalvlad369.blogspot.com/2025/04/webkit-box-sizing-border-box-moz-box.html
    https://kovalvlad369.blogspot.com/2025/04/foundation-layout-1-2-3-4-search-menu-1.html
    Эта практика
    https://kovalvlad369.blogspot.com/2025/04/foundation-layout-header-background.html

    ОтветитьУдалить
    Ответы
    1. dmitrykonn26 апреля 2025 г. в 08:40

      Долги - оценка "хорошо", текущая практика - не принято. Тема не изменена на указанную в задании, отсутствует css с цветами элементов.

      Удалить

Добавлять новые комментарии запрещено.

Популярные сообщения