Створення простого блогу. ТЗ

Найпростіше тестове завдання для створення сайту: замовник усе життя мріяв про блог на кшталт html5rocks.com. Він розуміє, що красти дизайн погано, проте нічого не може з собою вдіяти і готовий понести потенційні ризики. На вас лягає задача скопіювати дизайн та реалізувати її на шаблоні WordPress.

Що від Вас чекає замовник:

  • створіть власну тему вордпрес;
  • скопіюйте наступні блоки верстки з донорського сайту у ваш індексний файл:
    • шапку (мається на увазі масивний темний блок з верхньою червоною полоскою);
    • виділений логотип замініть будь-яким власним;
    • виділений блок-напис зробіть заголовком сайту;
    • NB усі інші написи з шапки, значок RSS з контентної частини, нижні блоки-банери, копірайти а також блок пошуку слід прибрати;
    • скопіюйте фон сайту;
    • скопіюйте центральний блок, де будуть виведені новини із зображенням;
    • NB новини мусять наслідувати усі стилі донорського макету;
  • створіть 12 матеріалів про поросят. Матеріали мусять мати короткий опис, зображення та повний текст;
  • виведіть ці 12 матеріалів на головну сторінку.

 

26 коментарів для “Створення простого блогу. ТЗ”

  1. При інспектуванні вказаного сайту, знаходимо файл з правилами по оформленню сайту:
    v2-combined.min.css .
    Чи існує якась можливість його імпортувати і прив’язати до нашого індексного файлу, щоб не копіювати звідти стилі?

  2. Питання щодо логотипу. Я взяла картинку на одному із сайтів, скопіювала лінк, вставила в код, і в мене все красиво відобразилося.
    А от ситуація, коли замовник дає свій окремий файл з логотипом. Як його прикріпити в наш індексний файл, щоб він відображався на сайті? (Просто вказати шлях з папки на компі – в мене нічого не вийшло(( )

    1. Коли ви вказуєте адресу файлу на компі, то вказуєте це зазвичай через: Диск: \\ …
      в нашому випадку потрібно користуватись:
      — звичайним слешем “/”, в тому слеш має стояти числі на початку адреси;
      — вказувати адресу від кореня сайту. Тобто якщо малюнок лежить в папці img папки www Вашого test1.ru, то www буде Вашою кореневою папкою і слід вказати наступну адресу: “/img/малюнок”

    1. знаки “#”, “//”, “/* */” спрацьовують для коментування лише всередині синтаксису php. Тобто при коментуванні переконайтесь, що Ви вставляєте коменти всередині цих тегів, які власне і вважаються початком синтаксису php < ?php ?>

  3. На даний момент, в мене вийшло щось таке, як на малюнку (червона стрічка є, просто не вмістилася в малюнок).
    Відповідно, маю питання:
    1. Як ті новини вистроїти так, як на сайті-донорі? ( {display: inline;} в мене чомусь не виходить – можливо є ще якісь варіанти) ;
    2. В записи-пости-новини, в їхній контент вставила різні малюнки, до кожної новини свій малюнок. Як вивести на головну сторінку малюнки, щоб вони відповідали своїм темам? (Зараз в мене в коді просто вставлений лінк малюнка з першої новини: ““)
    3. Заголовки новин мають синій колір – і ніяк не можу їх поміняти, це принципово мають бути чорні? чи хай буде так?

    1

  4. А і ще питання: яким чином сортується список новин?
    Зараз у мене зверху остання новина (найсвіжіша), внизу – перша.
    А як зробити, щоб було навпаки? Чи цього не можна робити, бо це, наприклад, загально прийняте правило блогів, яке не коригується і всюди в неті однаково?

    1. щоб дані відображались сіткою, задайте для блоку з новиною наступні властивості:
      розмір на третину материнського блоку — width: 31%;
      обтікання (щоб влізало по три на ряд) — float: left;

        1. Вивід сіткою здійснюється через верстку. Контейнер новини (елемент списку “li”):
          зверніть увагу на властивісті під селектором .latest-articles ul li:
          обтікання — float: left;
          розмір на третину материнського блоку — width: 31%;

  5. Вирішила запитатися, чи правильно я думаю. Ось ця сторінка головна сайту HTML 5 ROCK, з якого ми копіювали елементи собі, вона є статичною? Тобто ось цей блок – Останні новини є статичним, чи це просто там ніхто не дописує зараз і, відповідно, дані/записи не оновлюються ніякі вже стільки часу.

Залишити відповідь