Зміст
- Крок 01. Початок роботи
- Крок 02. Створіть будинок для стилів друку
- Крок 03. Застосування стилів
- Крок 04. Подальші налаштування
- Крок 05. Тестування
- Сподобалось? Прочитайте це!
- Необхідні знання: Проміжний CSS, базовий HTML
- Потрібно: Текстовий редактор, веб-браузер, принтер або PDF-генератор-як-принтер
- Час проекту: 2-4 години
- Файл підтримки
Багато років тому, у давно забутий час розміщення веб-сторінок на основі таблиць, веб-розробники мали доступ до функції каскадних таблиць стилів (CSS), яка дозволила авторам вказати тип носія. Цей тип носія повідомляв браузеру, коли застосовувати стилі до сторінки - будь то для екрану, кишенькового пристрою чи навіть для друку.
Це було ще в 1998 році: браузери застосували деякі з цих функцій (наприклад, друк), і з плином часу розробники, що думають про перспективу, почали робити свої макети на основі таблиці для друку. Деякі елементи сторінки були видалені, щоб заощадити папір і чорнило, навіть зробивши коригування макетів, щоб краще підігнати аркуш паперу до фіксованого розміру.
Сьогодні табличні макети майже замінені конструкціями на основі div, а для тих, хто використовує специфікації HTML5, інші структурні та семантичні елементи. Однією з ключових переваг цього підходу є те, що CSS, як правило, використовується для визначення макета веб-сторінок, що забезпечує більшу свободу для переформатування та переформатування вже закодованих сторінок лише зі змінами CSS.
Ця гнучкість також призвела до зростання адаптивного веб-дизайну (RWD), що полегшує веб-сторінці адаптацію до різних розмірів екрану на основі CSS за допомогою умовної логіки. За останні три роки ми спостерігали розробку фреймворків, шаблонів, навчальних посібників - і навіть пародій - що означає, що розробники майже будь-якого рівня кваліфікації можуть створювати сторінки, які можуть адаптуватися до будь-якого розміру екрана, який розробник хоче підтримати. Вміст може переформуватися; навігація може регулюватися; елементи можуть зміщуватися в розмірах і положенні; типографіка сама налаштовується - і так далі.
Цей спосіб побудови ідеально підходить для того, щоб дозволити розробнику підтримувати друковану сторінку без особливих зусиль. За винятком якихось причин ви не бачите багато з цих ресурсів, включаючи або навіть враховуючи надруковану сторінку.
Сподіваємось, цей підручник забезпечить вам достатньо комфорту при виготовленні стилів друку, які ви зможете додати їх до будь-якого проекту, не витрачаючи свій бюджет.
Крок 01. Початок роботи
Перш за все, давайте розглянемо, як надруковані сторінки з сайту порівнюються з їхніми вихідними веб-сторінками:
Ми всі знаємо, що веб-сторінки можуть прокручуватися нескінченно довго, але надрукована сторінка обмежена розміром паперу і, можливо, тим, скільки паперу готовий витратити користувач. Друковані сторінки також є суто візуальним носієм інформації, тоді як веб-сторінка може мати відео, аудіо та навіть функції доступності, що полегшують тактильний зворотний зв’язок. Веб-сторінки можуть представляти як растрові дані (фотографії, графіки), так і векторні дані (типографіка, SVG), але після їх надрукування все це лише растрові дані на папері. Веб-сторінка є інтерактивною, що дозволяє змінювати елементи на екрані, тоді як надрукована сторінка не буде сильно змінюватися, за винятком використання води або вогню. Зручно пам’ятати про все це, оскільки ці пункти інформують про прийняті вами рішення щодо вмісту на друкованій сторінці (Чи потрібно показувати елементи керування звуком? Як я звертаюся до циклових зображень? Чи надто масивний мій нижній колонтитул, щоб навіть вмістити Лист паперу?).
Для цієї демонстрації я буду використовувати свій особистий веб-сайт як приклад (це винагороджує моє его і заважає мені представляти свою компанію вам). З досвіду я знаю, що сторінки, які, найімовірніше, будуть надруковані з мого сайту - це статті та мої біографії. Я буду дещо контролювати своє его, використовуючи стару сторінку статті для початку.
Переглядаючи сторінку, я знаю одне, що користувач очікує побачити: вміст. Оскільки це мій сайт, я хочу переконатися, що я зберігаю елементи на сторінці, коли користувач друкує:
- Брендинг
- Читач може знайти сторінку на моєму сайті
- Заява про авторські права
- Будь-який крос-брендинг (наприклад, система управління вмістом моєї компанії)
- Адреси посилань у моєму вмісті (можливо)
На противагу цьому є й інші предмети, які більшість користувачів друку не матимуть потреби або бажання бачити:
- Первинна навігація
- Вторинна навігація
- Пошук на сайті
- Піктограми та посилання в соціальних мережах
І нарешті, є деякі речі, яких незалежно від того, користувач чи я хочу, щоб їх надрукували, можливо, не буде:
- Кольори (особливо для однокольорових принтерів)
- Фонові зображення (і кольори)
- Частини приурочених / інтерактивних елементів (наприклад, фотографії в програмі циклу зображення).
- Білі зображення, такі як логотипи (вони будуть надруковані, але без кольорів тла можуть не відображатися крім ореолу згладжування)
Оскільки мій сайт випливає з моїх зусиль щодо RWD, я також отримав уявлення про те, як переформувати вміст, скласти елементи, відрегулювати розмір, змінити біти тощо. Прикиньтесь, що ваша веб-сторінка перебуває на чорно-білому екрані фіксованої ширини, і ви перебуваєте далеко вдома.
Крок 02. Створіть будинок для стилів друку
Перше, що потрібно зробити, це налаштувати CSS для утримання та виклику стилів друку. Якщо ви виконували кодування RWD, це має виглядати вам знайомим:
@media print {
/ * вставте сюди декларації стилю * /
}
Ви не обмежуєтесь цим підходом. Ви все ще можете зателефонувати до таблиці стилів друку з посилання> в документі голова>:
посилання rel = "таблиця стилів" type = "text / css" href = "/ css / print.css" media = "print">
Цей метод передбачає додатковий запит HTTP. Для відображення сторінки браузеру не потрібні стилі друку, але більшість не відображатимуть сторінку, поки не будуть витягнуті всі файли CSS; Opera - виняток. Крім того, жоден із сучасних браузерів не запускатиме жодних подій завантаження, поки всі файли не будуть завантажені. Оскільки таблиця стилів друку може містити так мало оголошень, часто не варто зайвих накладних витрат на HTTP та затримок у візуалізації або активації подій, щоб виділити стилі друку як окремий файл.
Крок 03. Застосування стилів
Мій логотип - це текст, і хоча він не чорний на білому, я зміню його на чорний, щоб користувач із кольоровим принтером не мав справу з червоним на білому папері. Це стосується моєї цілі брендування.
Скопіюйте код
# Банер p # Заголовок {
розмір шрифту: 24pt;
}
# Банер p # Заголовок a, # Банер p # Заголовок a: посилання, # Банер p # Заголовок a: відвідано {
колір: # 000; / * змінити посилання на чорний текст * /
}
Я знаю, що браузер може містити адресу сторінки на друкованій сторінці, але деякі користувачі перевизначають її, а деякі адреси сторінок занадто довгі, щоб вмістити їх. Оскільки на моїй сторінці є навігація, я вирішив залишити це на місці. Навіть якщо користувач не може прочитати адресу, яка може бути надрукована в нижньому колонтитулі, користувач може принаймні побачити шлях до цієї сторінки на моєму сайті. Це стосується моєї другої мети - дозволити читачеві пізніше знайти цю сторінку на моєму сайті.
# Хліб a: посилання, # Хліб a: відвідування {
текст-прикраса: підкреслення; / * залиште підказку, що це посилання * /
колір: # 000;
}
#Bread {
колір: # 000;
розмір шрифту: 6pt; / * зробити текст маленьким * /
}
#Bread> a: після {
зміст: ""; / * вимкнути відображення URL-адреси, якщо в #Content * /
}
Моя заява про авторські права знаходиться в моєму нижньому колонтитулі, тому, якщо я не роблю нічого іншого, як дозволити моєму нижньому колонтитулу друкувати, це стосуватиметься моєї другої цілі. Але я не хочу, щоб друкувалося все, що знаходиться в нижньому колонтитулі, тому, переконайтесь, що я вимкнув поле пошуку, наприклад.
#Footer {
розмір шрифту: 6pt; / * зробити текст маленьким * /
колір: # 000;
}
#SearchForm {
дисплей: немає;
}
Я залишаю логотип моєї CMS у нижньому колонтитулі. Мені не потрібно відображати URL-адресу (читачеві може бути все одно), але я все ще тримаю фірмовий стиль на місці. Це стосується моєї четвертої мети перехресного брендингу.
#Footer img {
поплавок: праворуч; / * визначено в іншому місці, включено для повноти * /
}
Моя п'ята мета - відобразити повну URL-адресу посилань залежить від контексту. Раніше я включав адресу після кожного посилання; однак, проблеми можуть виникнути через те, що деякі адреси посилань неймовірно довгі - занадто довгі, щоб користувач міг їх легко переписати.
Якщо я все-таки вирішу відображати гіперпосилання, важливо пам’ятати, що я обмежую їх вмістом (щоб мої хлібні колонтитули та нижній колонтитул не малювали URL-адреси після кожного елемента) і, можливо, виключали їх із зображень.
# Зміст a: після {/ * виберіть посилання лише в області вмісту * /
зміст: "[" attr (href) "]";
оформлення тексту: жодного;
дисплей: вбудований;
}
Тепер я можу ходити та приховувати елементи, які не хочу друкувати. На відміну від приховування елементів з маленьких екранів, що не є чудовою ідеєю в RWD, ми можемо приховувати елементи в друці, оскільки сторінка вже завантажена повністю, і елементи, які ви приховуєте, не повинні додавати значення друкованій сторінці.
У цьому прикладі я збираюся видалити навігацію, пошук, піктограми в соціальних мережах та все інше, що не має сенсу на папері.
#Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert, #SMLinks, #SearchForm {
дисплей: немає;
}
Це ще не стосується всіх моїх потреб. Перш ніж ми дійдемо до макета, мені потрібно буде розглянути деякі стандартні стилі, які ви, можливо, захочете мати на місці. Наприклад, ви могли помітити, що я розмірюю текст у крапках. Я роблю це, тому що мені це знайоміше. Поки ви тестуєте в різних браузерах, ви можете використовувати будь-які одиниці, які вам подобаються у ваших стилях друку.
У мене є набір стилів за замовчуванням, які я застосовую майже до всіх своїх таблиць стилів друку, щоб переконатись, що я не забуваю важливі речі. Я налаштовую його регулярно на кожному веб-сайті, але ось хороша відправна точка для моїх потреб:
тіло {
фон: #fff;
колір: # 000;
розмір шрифту: 8pt;
висота лінії: 150%;
поле: 0px;
}
год {
колір: #ccc;
фон-колір: #ccc;
}
h1, h2, h3, h4, h5, h6, код, pre {
колір: # 000;
перетворення тексту: немає; / * тому що іноді я встановлюю великі літери * /
}
h1 {
розмір шрифту: 11pt;
margin-top: 1em;
}
h2 {
розмір шрифту: 10pt;
}
h3 {
розмір шрифту: 9pt;
}
h4, h5, h6 {
розмір шрифту: 8pt;
}
код, до {
розмір шрифту: 8pt;
фон-колір: прозорий;
/ * про всяк випадок, якщо користувач налаштував браузер для друку фонів * /
}
blockquote {
фонове зображення: немає;
/ * хоча вони можуть і не друкувати, я волію бути впевненим * /
}
a: посилання, a: відвідане {
текст-прикраса: підкреслення;
колір: # 000;
}
абревіатура: після, абревіатура: після {/ * деяка HTML4 любов * /
зміст: "(" attr (title) ")";
/ * Я підозрюю, що я один з небагатьох, хто все ще використовує ці елементи * /
}
Ці стилі виконують ряд основних речей:
- Вони очищають пробіли навколо вмісту (налаштування друку користувача оброблятимуть поля сторінки для вас).
- Вони також скидають розміри типів до точок і встановлюють текст чорним (оскільки цілком можливо, що ваш акуратний, світло-сірий текст не спричинить власні заміни браузера для перетворення білого тексту в чорний під час друку).
- Вони навіть пишуть значення вашого скорочення> і акронім> атрибути заголовка на сторінці (що можна зробити з будь-яким атрибутом будь-якого елемента, наприклад текст заміщення на зображеннях, хоча це, мабуть, не підходить).
Крок 04. Подальші налаштування
Якщо ваш сайт вже адаптується до мобільного макета, то ви, мабуть, уже створили стилі, що враховують лінеаризацію макета. Якщо ви нічого не робите, ви можете використати зручний для мобільних пристроїв макет як вихідну точку та просто вимкнути навігацію та інші елементи, які ви не хочете зберігати.
На цьому етапі вам слід почати обмірковувати, які ще стилі у вас є, щоб врахувати макети з різними розмірами екрану. Хорошим прикладом є залежність від масштабування розмірів зображення на основі розміру області перегляду.
Я бачу багато сайтів, які в деяких медіа-запитах можуть масштабувати зображення до 100% ширини. Це може бути проблемою для друкованої сторінки, оскільки це може ненавмисно масштабувати зображення до ширини паперу, іноді беручи для себе цілий аркуш паперу. Подумайте, чи можна зменшити зображення, щоб зберегти папір і чорнило користувача, а в деяких випадках подумайте, чи потрібно взагалі його масштабувати.
Подумайте про елементи вашого макета, які не належать навіть на папері. Наприклад, у вас є Flash, вбудований YouTube або інтерактивні віджети?
Можливо, ви захочете повністю видалити їх із друкованої сторінки. Якщо ви цього не зробите, ваше вбудоване відео YouTube (наприклад) все одно може зайняти багато місця (і паперу), але виглядатиме порожнім або не буде мати жодної цінності.
Крок 05. Тестування
Як тільки ви встановите всі свої стилі, протестуйте. Я використовую два прийоми, які не вимагають від мене друку сторінки. Спочатку я спираюся на функції попереднього перегляду браузера - швидкий спосіб побачити, як інтерпретуються ваші стилі. По-друге, коли я хочу побачити, як обробляється сторінка, я друкую в PDF, а потім переглядаю його.
Жодне з них не повторює досвід утримання аркуша паперу в руках (і усвідомлення того, що вам потрібно масштабувати текст по-іншому, або ваші зображення занадто великі), але вони дозволяють зробити основну частину тестування безкоштовно. або дерева.
Одне, на чому я не можу наголосити, - це тестування між браузерами. Запустіть кожен браузер, який у вас є, і прийміть пропуск. Ви можете виявити, що Chrome задихається на ваших вбудованих шрифтах, Firefox має інші поля за замовчуванням, ніж ви очікуєте, або Opera просто дуже любить обертати ваш логотип так, як ви не очікували.
Ця стаття вперше з’явилася у випуску 231 журналу .net - найпопулярнішого у світі журналу для веб-дизайнерів та розробників.
Адріан Розеллі Адріан - засновник, партнер та старший інженер юзабіліті в Algonquin Studios і спеціалізується на HTML, CSS, JavaScript та CMS. adrianroselli.com
Сподобалось? Прочитайте це!
- Кінцевий посібник з дизайну логотипу
- Наші улюблені веб-шрифти - і вони не коштують ні копійки
- Дізнайтеся, що буде далі з доповненою реальністю
- Завантажте безкоштовні текстури: висока роздільна здатність і готові до використання зараз
