Для кожного оператора є полегшена версія з коротшою назвою (без приставки all). Різниця в тому, що allinurl знайде посилання з усіма словами, а inurl - тільки з першим з них. Друге та наступні слова із запиту можуть зустрічатися на веб-сторінках будь-де. Оператор inurl теж має відмінності від іншого схожого за змістом - site. Перший також дозволяє знаходити будь-яку послідовність символів у посиланні на потрібний документ (наприклад, /cgi-bin/), що широко використовується для пошуку компонентів з відомими вразливістю.

Спробуємо практично. Беремо фільтр allintext і робимо так, щоб запит видав список номерів та перевірочних кодів кредиток, термін дії яких закінчиться лише через два роки (або коли їх власникам набридне годувати всіх поспіль).

Allintext: card number expiration date /2017 cvv

Коли читаєш у новинах, що юний хакер «зламав сервери» Пентагону або NASA, вкравши секретні відомості, то здебільшого йдеться саме про таку елементарну техніку використання Google. Припустимо, нас цікавить список співробітників NASA та їх контактні дані. Напевно, такий перелік є в електронному вигляді. Для зручності або недогляду він може лежати і на самому сайті організації. Логічно, що в цьому випадку на нього не буде посилань, оскільки він призначений для внутрішнього використання. Які слова можуть бути у такому файлі? Як мінімум – поле «адреса». Перевірити всі ці припущення найпростіше.

Inurl:nasa.gov filetype:xlsx "address"

Користуємося бюрократією

Подібні знахідки – приємна дрібниця. По-справжньому ж солідний улов забезпечує більш детальне знання операторів Google для веб-майстрів, самої Мережі та особливостей шуканої структури. Знаючи деталі, можна легко відфільтрувати видачу та уточнити властивості потрібних файлів, щоб у залишку отримати справді цінні дані. Смішно, що тут на допомогу приходить бюрократія. Вона плодить типові формулювання, за якими зручно шукати секретні відомості, що випадково просочилися в Мережу.

Наприклад, обов'язковий у канцелярії міністерства оборони США штамп Distribution statement означає стандартизовані обмеження поширення документа. Літерою A відзначаються громадські релізи, у яких немає нічого секретного; B - призначені лише внутрішнього використання, C - суворо конфіденційні тощо до F. Окремо стоїть літера X, якої відзначені особливо цінні відомості, що становлять державну таємницю вищого рівня. Нехай такі документи шукають ті, кому це належить робити за обов'язком служби, а ми обмежимося файлами з літерою С. Згідно з директивою DoDI 5230.24, таке маркування присвоюється документам, що містять опис критично важливих технологій, які потрапляють під експортний контроль. Виявити таку ретельно охоронювану інформацію можна на сайтах у домені верхнього рівня.mil, виділеного для армії США.

"DISTRIBUTION STATEMENT C" inurl:navy.mil

Дуже зручно, що в домене.mil зібрані лише сайти з відомства МО США та його контрактних організацій. Пошукова видача з обмеженням по домену виходить виключно чистою, а заголовки - самі за себе. Шукати подібним чином російські секрети практично марно: в домене.

Уважно вивчивши будь-який документ із сайту в домене.mil, можна побачити інші маркери для уточнення пошуку. Наприклад, посилання на експортні обмеження «Sec 2751», за яким також зручно шукати цікаву технічну інформацію. Іноді її вилучають з офіційних сайтів, де вона одного разу засвітилася, тому, якщо в пошуковій видачі не вдається перейти за цікавим посиланням, скористайся кешем Гугла (оператор cache) або сайтом Internet Archive.

Забираємось у хмари

Окрім випадково розсекречених документів урядових відомств, у кеші Гугла часом спливають посилання на особисті файли з Dropbox та інших сервісів зберігання даних, які створюють «приватні» посилання на публічно опубліковані дані. З альтернативними та саморобними сервісами ще гірше. Наприклад, наступний запит знаходить дані всіх клієнтів Verizon, у яких на роутері встановлено та активно використовується FTP-сервер.

Allinurl:ftp://verizon.net

Таких розумників зараз знайшлося понад сорок тисяч, а навесні 2015-го їх було значно більше. Замість Verizon.net можна підставити ім'я будь-якого відомого провайдера, і чим він буде відомішим, тим більшим може бути улов. Через вбудований FTP-сервер видно файли на підключеному до маршрутизатора зовнішньому накопичувачі. Зазвичай це NAS для віддаленої роботи, персональна хмара або якась пірінгова гойдалка файлів. Весь вміст таких носіїв виявляється проіндексованим Google та іншими пошуковими системами, тому отримати доступ до файлів, що зберігаються на зовнішніх дисках, можна за прямим посиланням.

Підглядаємо конфіги

До повальної міграції до хмар як віддалених сховищ керували прості FTP-сервери, в яких теж вистачало вразливостей. Багато хто з них актуальний досі. Наприклад, у популярній програмі WS_FTP Professional дані про конфігурацію, облікові записи користувача та паролі зберігаються у файлі ws_ftp.ini . Його просто знайти та прочитати, оскільки всі записи зберігаються у текстовому форматі, а паролі шифруються алгоритмом Triple DES після мінімальної обфускації. Більшість версій досить просто відкинути перший байт.

Розшифрувати такі паролі легко за допомогою утиліти WS_FTP Password Decryptor або безкоштовного веб-сервісу.

Говорячи про зло довільного сайту, зазвичай мають на увазі отримання пароля з логів та бекапів конфігураційних файлів CMS або додатків для електронної комерції. Якщо знаєш їхню типову структуру, то легко зможеш вказати ключові слова. Рядки, подібні до ws_ftp.ini , вкрай поширені. Наприклад, Drupal і PrestaShop обов'язково є ідентифікатор користувача (UID) і відповідний йому пароль (pwd), а зберігається вся інформація у файлах з розширенням.inc. Шукати їх можна так:

"pwd=" "UID=" ext:inc

Розкриваємо паролі від СУБД

У конфігураційних файлах SQL-серверів імена та адреси електронної пошти користувачів зберігаються у відкритому вигляді, а замість паролів записані їхні хеші MD5. Розшифрувати їх, строго кажучи, неможливо, проте можна знайти відповідність серед відомих пар хеш-пароль.

Досі зустрічаються СУБД, у яких не використовується навіть хешування паролів. Конфігураційні файли будь-якої з них можна просто переглянути в браузері.

Intext:DB_PASSWORD filetype:env

З появою на серверах Windows місце файлів конфігурації частково зайняв реєстр. Шукати по його гілках можна таким же чином, використовуючи reg як тип файлу. Наприклад, ось так:

Filetype:reg HKEY_CURRENT_USER "Password"=

Не забуваємо про очевидне

Іноді дістатися до закритої інформації вдається за допомогою випадково відкритих даних, що потрапили в поле зору Google. Ідеальний варіант - знайти список паролів у якомусь поширеному форматі. Зберігати відомості облікових записів у текстовому файлі, документі Word або електронній таблиці Excel можуть лише відчайдушні люди, але їх завжди вистачає.

Filetype:xls inurl:password

З одного боку, є маса коштів для запобігання подібним інцидентам. Необхідно вказувати адекватні права доступу до htaccess, патчити CMS, не використовувати ліві скрипти та закривати інші дірки. Існує також файл зі списком винятків robots.txt, що забороняє пошуковикам індексувати зазначені в ньому файли та каталоги. З іншого боку, якщо структура robots.txt на якомусь сервері відрізняється від стандартної, відразу стає видно, що на ньому намагаються приховати.

Список каталогів та файлів на будь-якому сайті випереджається стандартним написом index of. Оскільки для службових цілей вона повинна зустрічатися в заголовку, то є сенс обмежити її пошук оператором intitle . Цікаві речі знаходяться в каталогах /admin/, /personal/, /etc/ і навіть /secret/.

Слідкуємо за оновленнями

Актуальність тут дуже важлива: старі вразливості закривають дуже повільно, але Google та його пошукова видача змінюються постійно. Є різниця навіть між фільтром «за останню секунду» (&tbs=qdr:s наприкінці урла запиту) та «в реальному часі» (&tbs=qdr:1).

Часовий інтервал дати останнього оновлення файлу у Google також вказується неявно. Через графічний веб-інтерфейс можна вибрати один із типових періодів (годину, день, тиждень і так далі) або задати діапазон дат, але такий спосіб не підходить для автоматизації.

За видом адресного рядка можна здогадатися лише про спосіб обмежити виведення результатів за допомогою конструкції &tbs=qdr: . Літера y після неї ставить ліміт в один рік (&tbs=qdr:y), m показує результати за останній місяць, w - за тиждень, d - за минулий день, h - за останню годину, n - за хвилину, а s - за секунду. Найсвіжіші результати, які щойно стали відомими Google, знаходиться за допомогою фільтра &tbs=qdr:1 .

Якщо потрібно написати хитрий скрипт, буде корисно знати, що діапазон дат задається в Google в юліанському форматі через оператор daterange. Наприклад, ось так можна знайти список PDF-файлів зі словом confidential, завантажених з 1 січня по 1 липня 2015 року.

Confidential filetype:pdf daterange:2457024-2457205

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

Таргетуємось і знову фільтруємо

Крім вказівки додаткових операторів, у пошуковому запиті їх можна надсилати прямо в тілі посилання. Наприклад, уточненню filetype:pdf відповідає конструкція as_filetype=pdf. Таким чином зручно задавати будь-які уточнення. Допустимо, видача результатів тільки з Республіки Гондурас задається додаванням до пошукової URL конструкції cr=countryHN , а тільки з міста Бобруйск - gcs=Bobruisk . У розділі розробників можна знайти повний список .

Засоби автоматизації Google мають полегшити життя, але часто додають проблем. Наприклад, IP користувача через WHOIS визначається його місто. На підставі цієї інформації в Google не тільки балансується навантаження між серверами, а й змінюються результати пошукової видачі. Залежно від регіону при тому самому запиті на першу сторінку потраплять різні результати, а частина з них може виявитися прихованою. Відчути себе космополітом та шукати інформацію з будь-якої країни допоможе її дволітерний код після директиви gl=country. Наприклад, код Нідерландів - NL, а Ватикану та Північній Кореї в Google свій код не покладено.

Часто пошукова видача виявляється засміченою навіть після використання кількох просунутих фільтрів. У такому разі легко уточнити запит, додавши до нього кілька слів-виключень (перед кожним з них ставиться мінус). Наприклад, зі словом Personal часто використовуються banking, names і tutorial. Тому чистіші пошукові результати покаже не хрестоматійний приклад запиту, а уточнений:

Intitle:"Index of /Personal/" -names -tutorial -banking

Приклад наостанок

Досвідчений хакер відрізняється тим, що забезпечує себе всім необхідним самостійно. Наприклад, VPN - штука зручна, але дорога, або тимчасова і з обмеженнями. Оформляти передплату для себе одного дуже невигідно. Добре, що є групові підписки, а за допомогою Google легко стати частиною якоїсь групи. Для цього достатньо визначити файл конфігурації Cisco VPN, у якого досить нестандартне розширення PCF і відомий шлях: Program Files Cisco Systems VPN Client Profiles. Один запит, і ти вливаєшся, наприклад, у дружній колектив Боннського університету.

Filetype:pcf vpn OR Group

INFO

Паролі зберігаються в зашифрованому вигляді, але Моріс Массар вже написав програму для їх розшифровки і надає її безкоштовно через thecampusgeeks.com.

За допомогою Google виконуються сотні різних типів атак та тестів на проникнення. Є безліч варіантів, що стосуються популярних програм, основні формати баз даних, численні вразливості PHP, хмар і так далі. Якщо точно уявляти те, що шукаєш, це спростить отримання потрібної інформації (особливо тієї, яку не планували робити загальним надбанням). Не єдиний Shodan живить цікавими ідеями, але будь-яка база проіндексованих мережевих ресурсів!

Розробка, супровід та розкрутка сайтів

Створення "версії для друку" веб-сторінки

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

Звичайно, ніхто не заважає отримати роздрук вихідної сторінки прямо в браузері командою Друкабо комбінацією CTRL+P,проте при цьому будуть роздруковані непотрібні елементи сторінки - меню, шапка та ін, які ускладнюють сприйняття необхідної інформації. Крім того, кольорові елементи друку на монохромному принтері виглядають зазвичай малопривабливо.

Для зручності користувачів розробники сайтів зазвичай створюють окрему сторінку. версію для друку, на якій залишають лише необхідний текст, малюнки в чорно-білому варіанті (відтінки сірого) та контактні дані для зв'язку.

При створенні такої сторінки слід прибрати зайві декоративні елементи, замінити гіперпосилання простим текстом, виключити виділення слів і фраз кольором, замінивши курсивом або жирним шрифтом. Вгорі сторінки бажано розмістити логотип та назву фірми, телефон та інші способи зв'язку. Обов'язково вкажіть назву сайту, щоб користувач не шукав надалі, звідки він роздрукував цю сторінку.

Внизу сторінки бажано вказати повні контактні дані: адресу, телефон, e-mail, ICQ, URL сайту та ін.

Для переходу з основної сторінки на версію для друкуможна використовувати будь-які відповідні картинки та текст, наприклад, такого виду:

На самій сторінці версії для друкухорошим тоном вважається встановити кнопку Друк,при натисканні на якій відкривається вікно установок принтера. Для цього використовується метод JavaScript window.print(); який друкує на принтері Web-сторінку, що у поточному вікні. Непогано також розмістити посилання на повернення на основну сторінку.

Оформлення кнопок можна зробити простими посиланнями
Роздрукувати (код Роздрукувати) і , але цікавіше - за допомогою тега :

HTML-код такої комбінації:

адреса основної сторінки");" />

В обох випадках буде відкриватися стандартне вікно роздруківки документа, яке можете подивитися, натиснувши наведені приклади кнопок.

Насамкінець, не забудьте розмістити на сторінці друку код лічильника статистики, щоб відстежувати кількість відвідувачів, які зберегли "тверду копію" опису вашого товару або послуги, хоча ці дані не завжди можуть вас порадувати. На жаль...

Корисні статті на тему "Розробка, супровід та розкрутка сайтів"

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

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

Можливо, це сталося тому, що я витрачаю багато часу на зміну розміру вікна браузера, щоб гарантувати, що мої сайти працюють чудово у всіх розмірах та формах, а може тому, що я рідко друкую сторінки для себе. Незалежно від причин, я зовсім забув про стилі для друку та це погано.

Оптимізація веб-сторінок для друку важлива, тому що друкуючи сторінки ми робимо сайт максимально доступним, незалежно від середовища. Ми не повинні робити припущень про наших користувачів та їхню поведінку. Люди продовжують друкувати веб-сторінки. Подумайте про статті, записи в блогах, рецепти, контактну інформацію, сайти з картами або об'єктами нерухомості. Хтось колись обов'язково спробує роздрукувати одну з ваших сторінок.

Я закинув домашні принтери дуже давно, тому що мені завжди здавалося, що вони ламаються після 10 хвилин роботи. Але не всі такі, як я. - Хейдон Пікерінг (Inclusive Design Patterns)

Якщо ви помітили, що у схожому положенні, цей пост допоможе вам у швидкому освіженні знань. Якщо ви не оптимізували свої сторінки для друку, наступні поради допоможуть вам розпочати.

1. Підключення стилів для друку

Найкращим способом підключення стилів для друку є оголошення директиви @media у вашому CSS.

Body ( font-size: 18px; ) @media print ( /* print styles go here */ body ( font-size: 28px; ) )

Альтернативно ви можете підключити стилі HTML, але це вимагає додаткового запиту HTTP.

2. Тестування

Вам не потрібно друкувати сторінку щоразу, коли ви внесли невелику зміну в стилі. Залежно від браузера, ви можете експортувати сторінку до PDF, використовувати попередній перегляд друку або проводити налагодження безпосередньо у браузері.

Щоб налагодити стилі для друку у Firefox, відкрийте панель розробки (Shift + F2 або меню Tools > Web Developer > Developer Toolbar), введіть у полі введення media emulate print і натисніть клавішу enter . Активна вкладка до перезавантаження працюватиме так, ніби типом медіа є print .

Емуляція стилів для друку у Firefox

У Chrome відкрийте інструменти розробника (CMD + Opt + I (macOS) або Ctrl + Shift + I (Windows) або меню View > Developer > Developer Tools) і вивести консоль, відкрити панель рендерингу та в меню Emulate CSS Media вибрати Print.

Емуляція стилів для друку в Chrome

3. Абсолютні одиниці виміру

Абсолютні одиниці виміру це погано на екрані, але добре для друку. У стилях друку їх використання абсолютно безпечно і навіть рекомендовано використовувати такі одиниці як cm, mm, in, pt або pc.

Section ( margin-bottom: 2cm; )

4. Специфічні правила сторінок

Можна встановити властивості, специфічні для друкованої сторінки, такі як її розміри, орієнтація та відступи за допомогою директиви @page . Це дуже зручно, якщо ви хочете, щоб всі сторінки мали певні відступи.

@media print ( @page ( margin: 1cm; ) )

Директива @page це частина специфікації Paged Media Module , в якій є такі чудові речі, як можливість вибрати першу сторінку, що друкується, або порожні сторінки, позиціонувати елементи в кутку сторінки і багато іншого . Це можна використовувати навіть для друку книг.

5. Управління розривами сторінок

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

Розрив сторінки перед елементом.

Якщо ми хочемо, щоб елемент завжди був на початку сторінки, ми можемо встановити примусовий розрив сторінки за допомогою правила page-break-before .

Section ( page-break-before: always; )

Розрив сторінки після елемента.

Правило page-break-after дозволяє нам форсувати або забороняти розрив сторінок після елемента.

H2 (page-break-after: always;)

Розрив сторінки всередині елемента

Ця властивість зручна, якщо вам треба уникнути розриву сторінки всередині елемента.

Ul (page-break-inside: avoid; )

Вдови та сироти (висячі рядки)

Іноді вам не потрібен контроль над розривом сторінки, але важливим є контроль над тим, скільки рядків буде виведено на поточній, а скільки на наступній сторінці. Наприклад, якщо останній рядок параграфа не міститься на поточній сторінці, на наступну сторінку вона буде перенесена разом із передостанньою. Це тому, що відповідна властивість widows за промовчанням дорівнює 2. Ми можемо змінити його.

P (widows: 4; )

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

P ( orphans: 3; )

Цей код означає, що щонайменше 3 рядки повинні поміщатися на поточній сторінці, щоб параграф не переносився на наступний.

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

6. Скидання стилів

Має сенс скинути для друку деякі стилі типу background-color, box-shadow та color.

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( background: transparent !important; color: #000 !important;box-shadow: none !important;text-shadow: none !important; )

Стилі для друку є одним з тих небагатьох винятків, коли використання ключового слова!important цілком нормально.

7. Видалення необов'язкового контенту

Щоб уникнути зайвого витрачання чорнила, ви повинні видалити непотрібне - оформлювальні елементи, рекламу, навігацію тощо. за допомогою властивості display: none.

Ви, в принципі, можете показати лише основний контент та сховати все інше:

Body > *:not(main) ( display: none; )

8. Друк адрес посилань

A:after (content: "("attr(href)")";)

Звичайно, так буде показано все: відносні посилання, абсолютні посилання, якорі та інше. Наступний варіант працюватиме краще:

A:not():after ( content: " (" attr(href) ")"; )

Дивиться шалено, я знаю. Ці рядки працюють так: виводиться значення атрибуту href поряд з будь-яким посиланням, яке він має, якщо він починається з http, але не веде на наш mywebsite.com.

9. Друк розшифровок абревіатур

Абревіатури повинні обертатися елементом із зазначенням розшифровки в атрибуті title. Має сенс вивести це на друк.

Abbr:after (content: "("attr(title)")";)

10. Друк фону

Зазвичай браузери не друкують фонового кольору та фонових зображень, якщо ви прямо не вкажете ним. Є нестандартизована властивість print-color-adjust , що дозволяє переписати стандартні налаштування в деяких браузерах.

Header ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )

11. Медіазапити

Якщо ви пишете медіазапити як у наступному прикладі, майте на увазі, що стилі в цьому медіазапиті не будуть застосовуватися під час друку.

@media screen and (min-width: 48em) ( /* screen only */ )

Ви запитаєте чому? Тому що правила CSS застосовуються тільки при виконанні обох умов: min-width дорівнює 48em, media-type - screen. Якщо позбутися ключового слова screen , медіазапит враховуватиме лише значення min-width .

@media (min-width: 48em) ( /* all media types */ )

12. Друк карт

Поточні версії Firefox і Chrome можуть друкувати карти, а ось Safari немає. Деякі послуги надають статичні карти, які можна друкувати замість оригіналу.

Map ( width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap& "); -webkit-print-color-adjust: exact; print-color-adjust: exact; )

13. QR-коди

Додаток 2: Gutenberg

Якщо ви шукаєте фреймворк, то вам може сподобатися Gutenberg, який робить оптимізацію сторінок трохи простіше.

Додаток 3: Hartija

Це ще один фреймворк для створення стилів для друку

Часто на сайтах можна зустріти версію для друку тієї чи іншої сторінки. Багато хто думає, що це щось вбудоване в сам браузер або це робиться дуже просто. Насправді це зовсім не так. Версія для друку - це звичайна сторінка, яку Вам потрібно самостійнозробити.

Ви можете подивитися на версію для друку цієї статті. Фактично що потрібно відображати там? Назва статті, розділ, категорія, автор, сам текст та дата. Все це і виведено на цю сторінку. Чи потрібні меню, форма пошуку, різні блоки? Не думаю, тому їх немає.

Також переконайтеся, що ширина версії для друку не перевищує 650px, інакше браузер може порізати краї.

Отже, Ви вже зрозуміли, що версію для друкуВам треба створювати самостійно, виводячи рівно те, що потрібно користувачеві. Тепер про те, як це зробити.

Є 2 варіанти: створити окрему сторінку та створити окремий файл стилів. Перший варіант, гадаю, зрозумілий. Створюєте ще одну сторінку з версією для друкуі на основній сторінці даєте посилання на цю друковану версію. Користувач по ній переходить і через "Файл"->"Друк"він її роздрукує.

Другий варіант має на увазі створення окремої таблиці стилів, де Ви приховаєте всі зайві блоки (через display: none;) і поставте відповідні розміри у контенту, що виводиться. Далі такий файл стилів підключається так:

Тепер якщо користувач захоче роздрукувати цю сторінку, то роздрукується не те, що він бачить, а те, що прописано в print.css. Фактично користувач бачить сторінку в одному вигляді, а принтер в зовсім іншому.

Ось таким чином створюється версія для друкубудь-якої сторінки сайту.

Здавалося б, що складного у створенні сторінки для друку? Просто створюємо такий самий документ з текстом, але без будь-якого дизайну і ставимо на нього посилання зі звичайної сторінки. Але в пошукових системах з'явився фільтр контенту, що дублюється, і веб-майстрам доводиться ховати сторінки для друку від індексації. До того ж відвідувачам сайту теж не дуже зручно, адже потрібно спочатку перейти на копію потрібної сторінки, в якій відсутні елементи дизайну, і потім вже натискати на кнопку "Друк".

Тут нам на допомогу може прийти CSS, який не тільки зменшить кількість роботи для веб-майстрів і спростить користування сайтом відвідувачам, але й дозволить уникнути санкцій з боку пошукових систем за контент, що дублюється.

Структура сторінки

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

Як бачите, ми маємо таблицю з трьома осередками, які розташовані горизонтально. Все як у звичайного сайту: навігація зліва, посередині контент, а в правій частині рекламні блоки або новини. Кожному осередку було присвоєно свій id. Для лівої частини це leftcolumn, для правої - rightcolumn, а для середньої комірки з контентом - content.

Додаємо CSS

Тепер за допомогою CSS потрібно вказати браузеру, які стилі він повинен використовувати для відображення елементів сторінки на екрані і які він повинен використовувати під час друку. Створюємо style.css і пишемо туди таке:

Перший блок CSS-коду описує, як повинні відображатися елементи сторінки у браузері. Блок був узятий у додаткові фігурні дужки, перед якими ми дописали @media screen. Це дає браузеру зрозуміти що ці стилі потрібно застосувати для виведення на екран:

Так виглядає сторінка під час перегляду у браузері

Другий блок описує відображення тих самих елементів сторінки, що й перший, але в даному випадку в тому вигляді, в якому буде виглядати документ під час друку і позначається параметром @media print. Оскільки ми хочемо, щоб був надрукований тільки корисний контент, ми забороняємо для відображення ліву (#leftcolumn) і праву (#rightcolumn) комірки надавши їм значення display: none.

Так виглядає роздрукована версія сторінки сайту

Окремі файли стилів

Поєднувати все в один файл стилів зовсім не обов'язково. Натомість ви можете використовувати два файли стилів і при їх підключенні до сторінок сайту вказувати браузеру який файл стилів використовувати під час друку, а який для виведення на екран. Перший (для виведення на екран) визначається параметром media="screen", а другий буде використовуватися для друку та визначається параметром media="print":

Стилі для друку потрібно описувати після решти, інакше Opera друкуватиме блок контенту разом з кольоровим тлом, який призначений для виведення в браузер, а не білий колір, вибраний нами для друку.

Також під час друку ми строго зменшуємо ширину блоку з контентом до 600px, тому що при ширині 100% принтер "обрізає" невелику смугу тексту з правого боку сторінки. Зверніть також увагу на те, що при друку з Opera відступ по краях аркуша трохи менше ніж в Internet Explorer і рядки тексту на аркуші паперу виходять ширше.

Тепер вам не потрібно створювати додаткові сторінки для друку. Повідомити користувачам про можливість друку сторінки можна, наприклад, за допомогою посилання з текстом "друк", при натисканні на яку буде виводитися підказка, з повідомленням про можливість безпосередньо друкувати поточну сторінку без дизайну.

Копіювання статті заборонено.