Посібники

Оберіть завдання для свого сайту: підготувати зображення, налаштувати WordPress, поліпшити верстку або створити банер. Кожен посібник містить порядок дій, приклад і перевірку результату.

Зображення HTML і дизайн WordPress Банери й рух

Назва, завдання або інструмент

Знайдено: 23

Пошук працює локально за назвами й описами. Без JavaScript повний перелік доступний нижче.

Як зменшити фото й зберегти деталі

Розмір у пікселях, розмір файлу та розмір на сторінці — різні величини. Спочатку визначте місце зображення, потім підготуйте потрібні пікселі й лише після цього налаштовуйте стиснення.

Прозоре тло без білої облямівки

Прозорість зберігається в альфа-каналі. Шахова підкладка редактора допомагає її побачити, але не має потрапити до експортованого зображення.

Растр чи вектор: вибираємо за завданням

Фотографія складається з пікселів, а векторний малюнок описує форми. Вибирайте формат за змістом, а не за правилом «вектор завжди кращий».

Знімок екрана, який допомагає розв’язати проблему

Корисний скриншот показує помилку та її контекст, але не розкриває паролі, листування чи платіжні дані. Виберіть область і перевірте збережений файл перед надсиланням.

Вирізати фрагмент фото й зберегти оригінал

Кадрування змінює межі кадру, а масштабування — кількість пікселів. Якщо переплутати ці дії, предмет або обличчя можуть розтягнутися.

Чіткіше фото без ореолів

Підвищення різкості посилює локальний контраст. Воно не відновлює достовірних деталей, яких немає в оригіналі, і не замінює правильного фокусування.

Чорно-біле фото: керуємо світлом, а не лише кольором

Знебарвлення й осмислене чорно-біле опрацювання дають різні результати. Важливе розділення предмета й тла за світлістю.

Повернути зображення, шар або горизонт

Поворот усього полотна та трансформація окремого шару — різні дії. Спочатку визначте, чи потрібно змінювати весь документ.

Дзеркальне відображення всього кадру чи предмета

Віддзеркалення міняє місцями лівий і правий боки, а не повертає картинку. Воно допомагає композиції, але може змінити зміст фото з текстом або впізнаваним місцем.

Заокруглені кути без зайвого файлу

Для вебсторінки заокруглення часто зручніше зробити CSS. Сам файл змінюють, коли він використовуватиметься поза вашим макетом або має містити прозорі кути.

Рамка навколо зображення: де її створювати

Рамка може бути частиною фото або інтерфейсу. Рамку картки простіше змінити CSS, а художнє обрамлення — у робочому документі.

Favicon: маленький знак, який залишається читабельним

Іконка вкладки має впізнаватися за розміру 16–32 пікселі. Зменшена копія довгого логотипа зазвичай стає плямою.

GIF-банер: зрозумілий сюжет замість блимання

Анімація має допомагати прочитати повідомлення. Одна думка, один перехід і спокійний фінальний кадр корисніші за постійну зміну дрібних написів.

CSS-анімація, яку можна вимкнути

Рух може пояснювати зміну стану: завантаження, розгортання чи новий крок. Не анімуйте все лише заради помітності.

Замість Flash: посилання, рух і звичайний HTML

Adobe припинила підтримку Flash Player 31 грудня 2020 року. Встановлення застарілого плагіна не підходить для запуску сучасного сайту.

Обтікання картинки текстом без зламаної сторінки

Float доречний, коли рядки справді мають обтікати малюнок. Для двох незалежних колонок використовуйте Grid або Flexbox.

Захист WordPress: спочатку відновлення, потім плагіни

Один захисний плагін не замінить оновлень, розмежування доступу та перевіреної копії. Почніть зі здатності відновити сайт після помилки.

Закріпити запис WordPress і перевірити результат

Закріплений запис може залишатися вгорі стрічки, але результат залежить від теми й запиту. Це не CSS position: sticky.

Встановити плагін WordPress і не втратити сайт

GitHub підтверджує існування коду, але не безпеку й не готовність ZIP до встановлення. Перевірте автора та призначення пакета.

Мова WordPress: сайт, профіль і переклади теми

Мова сторінок, панелі користувача та переклади теми можуть налаштовуватися окремо. Одна опція не перекладає всього сайту.

Шорткоди WordPress: знайти джерело й прибрати залежність

Шорткод — текстова команда, яку обробляє ядро, тема або плагін. Після вимкнення обробника на сторінці можуть лишитися квадратні дужки.

Читабельна стаття: рядок, ритм і контраст

Гарний шрифт не виправляє щільної стіни тексту. Читачеві потрібні зрозумілі заголовки, помітні посилання й зручна довжина рядка.

ТЗ на банер: бриф, який можна перевірити

В оригінальному документі Web Article були мета, розміри, стиль, сценарій, мови та адреса переходу. Ця структура корисна й нині; Flash і перелік майданчиків із документа не є сучасними вимогами.