Головоломка верстальщика сайта

Настало время посвятить вас в искусство сайтостроения, но чтобы не забивать голову большим количеством информации, Фомуви придумал эту логическую задачу. Ладно, вру, это я не смог справиться с заданием и прошу у вас помощи!Головоломка верстальщика сайта для детей

Итак, для тех, кто не любит читать, я подготовил видео – смотрите. Для тех, кто хочет читать – садитесь поудобнее, сейчас будет «сказочка верстальщика». А-ха-ха! Зловеще? Не стоит пугаться, вроде бы задание простое, но что-то я не могу разобраться. Кстати, вы знаете, кто такой верстальщик? Если говорить по-простому – это человек, который преобразует работу дизайнера, который нарисовал что-либо на бумаге или в графическом редакторе, в веб-страницу. Все блоки, рисунки, текст и таблицы верстальщик располагает нужным образом на странице сайта согласно задумке.

Перейдем от понятий к теории вёрстки сайта. Очень коротко, ведь у нас цель решить логическую задачу, а не выучить язык гиперразметки веб-страниц, правда? Рассмотрим конкретную проблему. Фомуви спрограммировал виджет (блок) для правой колонки сайта. Его суть: вписываем название виджета, которое будет выводиться на сайте в этом блоке, а также вписываем его содержимое, к примеру, список наших лучших интеллектуалов. Фомуви напрограммировал так, что получился такой блок:

Головоломка верстальщика сайта для детей Слайд 1

Код программы:

register_sidebar( array(
     'name' => 'Правый сайдбар',
     'id' => 'right-block',
     'before_widget' => '<div class="block">',
     'after_widget' => '</div>',
     'before_title' => '<div class="title">',
     'after_title' => '</div>'
) );

А вот так это будет отображаться код в самой странице после выполнения программы:

<div class="block">
     <div class="title">Заголовок</div>
</div>

Можно заметить, что блок обозначается парой <div> и </div>. Первый тег открывает блок, второй закрывает. Иерархия может быть бесконечной, как матрешка. В 1 блоке может быть сколько угодно других блоков, а в них ещё, ещё и ещё. В этих блоках мы можем указывать, как он будет выглядеть, к примеру дополнением вида class=»block». В отдельном файле я могу прописать, что блок с таким классом будет такой вышины, вот такой ширины. И синий, и отступы с выравниванием. А внутри блок будет с другим классом, его я оформлю как-то иначе. Надеюсь, суть ясна. Но такое решение меня не устраивало, мне нужно было вот такое отображение в итоге:

Головоломка верстальщика сайта для детей Слайд 2

<div class="block">
    <div class="title">Заголовок</div>
    <div class="content>Контент</div>
</div>

То есть я хотел три блока. Главный блок и два внутренних, мне бы так проще было оформлять каждый из них. Но дополнить код Фомуви я не могу, ведь я не программист, но как верстальщик я могу изменить строки, которые отвечают за вывод этой информации, а если быть точным вот эти:

|| Начало главного блока
'before_widget' => '<div class="block">',  
|| Конец главного блока
'after_widget' => '</div>', 
|| Начало блока вывода заголовка
'before_title' => '<div class="title">', 
|| Конец блока вывода заголовка
'after_title' => '</div>'

Тут нет аргументов, отвечающих за вывод блока <div class=»content> и добавить новые аргументы я не могу, но подправить правые части кода я могу, я ведь верстальщик, блоки – это моя стихия! Используя правила создания <div> блоков, дополните код так, чтобы получить нужную мне структуру. Очень надеюсь на вашу помощь!

P.S.: Если в задании что-либо не понятно, всегда можно посмотреть его на видео, там должно быть понятнее. Удачи в решении!

Оставить комментарий

Для отправки комментария вам необходимо авторизоваться.

  1. Lipfired

    register_sidebar( array(
    ‘name’ => ‘Правый сайдбар’,
    ‘id’ => ‘right-block’,
    ‘before_widget’ => »,
    ‘after_widget’ => »,
    ‘before_title’ => »,»,
    ‘after_title’ => »,»
    ) );

  2. Помощник Фомуви

    К сожалению, комментарий при публикации прошёл обработку и сайт все теги, которые посчитал лишними, стёр. Можете загрузить в виде картинки?

Подпишись на обновления