Найпростіше тестове завдання для створення сайту: замовник усе життя мріяв про блог на кшталт html5rocks.com. Він розуміє, що красти дизайн погано, проте нічого не може з собою вдіяти і готовий понести потенційні ризики. На вас лягає задача скопіювати дизайн та реалізувати її на шаблоні WordPress.
Що від Вас чекає замовник:
- створіть власну тему вордпрес;
- скопіюйте наступні блоки верстки з донорського сайту у ваш індексний файл:
- шапку (мається на увазі масивний темний блок з верхньою червоною полоскою);
- виділений логотип замініть будь-яким власним;
- виділений блок-напис зробіть заголовком сайту;
- NB усі інші написи з шапки, значок RSS з контентної частини, нижні блоки-банери, копірайти а також блок пошуку слід прибрати;
- скопіюйте фон сайту;
- скопіюйте центральний блок, де будуть виведені новини із зображенням;
- NB новини мусять наслідувати усі стилі донорського макету;
- створіть 12 матеріалів про поросят. Матеріали мусять мати короткий опис, зображення та повний текст;
- виведіть ці 12 матеріалів на головну сторінку.
Що таке NB?
Це потрібно лише вищезазначені блоки скопіювати в цей стандартний індексний файл, що ми маємо? Чи увесь сайт, а тобі видаляти лишнє?
NB (Nota Bene) — зауважити.
Простіше зробити першим варіантом — скопіювати окремі частини.
При інспектуванні вказаного сайту, знаходимо файл з правилами по оформленню сайту:
v2-combined.min.css .
Чи існує якась можливість його імпортувати і прив’язати до нашого індексного файлу, щоб не копіювати звідти стилі?
В принципі, можна зкачати файл, закинути його в тему та дати на нього посилання з індексу, використовуючи цей тег:
<link rel='stylesheet' href='шлях/v2-combined.min.css' type='text/css' media='all' />а яким чоном цей файл можна закинути собі? Є лінк на нього, якщо перейти – суцільним фоном йде текст. Можете зв понеділок цей аспкт детальніше висвітлити?
Питання щодо логотипу. Я взяла картинку на одному із сайтів, скопіювала лінк, вставила в код, і в мене все красиво відобразилося.
А от ситуація, коли замовник дає свій окремий файл з логотипом. Як його прикріпити в наш індексний файл, щоб він відображався на сайті? (Просто вказати шлях з папки на компі – в мене нічого не вийшло(( )
Коли ви вказуєте адресу файлу на компі, то вказуєте це зазвичай через: Диск: \\ …
в нашому випадку потрібно користуватись:
— звичайним слешем “/”, в тому слеш має стояти числі на початку адреси;
— вказувати адресу від кореня сайту. Тобто якщо малюнок лежить в папці img папки www Вашого test1.ru, то www буде Вашою кореневою папкою і слід вказати наступну адресу: “/img/малюнок”
А у мене лиш адреса лінку відобразилася замість картинки, що неправильно? І взагалі щось так важко йде…
Ще питання, чи можливо якось сюди прінтскріни кидати в коменти?
Скоріш за все у Вас розірваний тег малюнку. Звірте його з будь-яким робочим зразком.
Щодо прінтскрінів — гарна ідея, постараюсь реалізувати найближчим часом.
Ще маю питання – додаю свої коментарі до блоків коду після // таких двох скісних рисок і вони потім відображаються на сайті. ЯК їх приховати?
Сама собі відповідаю – треба ховати свої коментарі в правильні дужки.
знаки “#”, “//”, “/* */” спрацьовують для коментування лише всередині синтаксису php. Тобто при коментуванні переконайтесь, що Ви вставляєте коменти всередині цих тегів, які власне і вважаються початком синтаксису php
у мене вийшло ось так
https://drive.google.com/file/d/0Bx4-qjuZFYANaloyYnlFbFZXV1U/view?usp=sharing
Шапка вужча получилась, а лого не в шапці, а під нею. І ще я з фоном не розібралась.
Скоріш за все у Вас логотип винесений за межі блоку шапки. Звідси і менша висота в порівнянні.
На даний момент, в мене вийшло щось таке, як на малюнку (червона стрічка є, просто не вмістилася в малюнок).
“)
Відповідно, маю питання:
1. Як ті новини вистроїти так, як на сайті-донорі? ( {display: inline;} в мене чомусь не виходить – можливо є ще якісь варіанти) ;
2. В записи-пости-новини, в їхній контент вставила різні малюнки, до кожної новини свій малюнок. Як вивести на головну сторінку малюнки, щоб вони відповідали своїм темам? (Зараз в мене в коді просто вставлений лінк малюнка з першої новини: “
3. Заголовки новин мають синій колір – і ніяк не можу їх поміняти, це принципово мають бути чорні? чи хай буде так?
А і ще питання: яким чином сортується список новин?
Зараз у мене зверху остання новина (найсвіжіша), внизу – перша.
А як зробити, щоб було навпаки? Чи цього не можна робити, бо це, наприклад, загально прийняте правило блогів, яке не коригується і всюди в неті однаково?
В стандартних налаштуваннях сортування не виставиш…
Зробити це можна через властивості шаблону, але це буде один з пунктів наступних уроків.
Ось що у мене получилось.
щоб дані відображались сіткою, задайте для блоку з новиною наступні властивості:
розмір на третину материнського блоку — width: 31%;
обтікання (щоб влізало по три на ряд) — float: left;
Під гаслом: “Спати вночі не обов”язково”, я створила нарешті своїх 12 міні-поросят.
Марто, а яким чином у Вас відобразилися новини сіткою?…Можете написати команду?
І я приєднуюся )) Яким чином новини так відображаються, Маріє?
Вивід сіткою здійснюється через верстку. Контейнер новини (елемент списку “li”):
зверніть увагу на властивісті під селектором .latest-articles ul li:
обтікання — float: left;
розмір на третину материнського блоку — width: 31%;
Вирішила запитатися, чи правильно я думаю. Ось ця сторінка головна сайту HTML 5 ROCK, з якого ми копіювали елементи собі, вона є статичною? Тобто ось цей блок – Останні новини є статичним, чи це просто там ніхто не дописує зараз і, відповідно, дані/записи не оновлюються ніякі вже стільки часу.
Ми про це можемо тільки здогадуватись, але думаю, що автори проекту просто не мають часу 🙂
Бачила тут питання, але відповіді не знайшла: як зробити різні іконки/зображення? Чи потрібно спочатку створити різних авторів з їхніми фото як на донорському сайті?
На останньому скрін-шоті у Марії в шапці видно сіру смугу над червоною. У мене така ж вилазить у Мозіллі, а в Хромі нема. Це якось прописується додатково в коді? Це те саме, що й адаптація під різні ґаджети і браузери?