В прошлом создание удобной для принтера версию веб-страницы означает разработку отдельной страницы с изменением макета и форматирования, чтобы вы могли достичь удовлетворительных результатов при печати. Теперь, используя структурированные XHTML и CSS, вы можете достичь того же эффекта с гораздо меньшими усилиями. Большинство веб -страниц с экрана дисплея для печати эффект
В прошлом создание удобной для принтера версию веб-страницы означает разработку отдельной страницы с изменением макета и форматирования, чтобы вы могли достичь удовлетворительных результатов при печати. Теперь, используя структурированные XHTML и CSS, вы можете достичь того же эффекта с гораздо меньшими усилиями.
От дисплея экрана до печати эффект
Большинство веб -страниц предназначены для подходящего для просмотра компьютерных экранов. Однако иногда пользователям необходимо распечатать определенные страницы, возможно, просто чтобы вести долгосрочную запись или использовать их в качестве удобного автономного ссылки.
Проблема теперь заключается в том, что многие из функций, которые делают веб -страницу привлекательной и красочной на экране цвета компьютера, не могут показать тот же эффект на печатной версии веб -страницы, особенно когда принтер черно -белый. При пониженной печать в сероме, комбинация цветов потеряет (оригинальный) эффект контраста; Графика будет выглядеть искаженной и займет слишком много времени, чтобы печатать; Кнопки навигации, которые играют важную роль на веб -странице, бесполезны на странице печати.
Чтобы преодолеть эти проблемы, создатели веб-сайта часто разрабатывают удобную для принтера версию страницы, чтобы посетители имели желание печатать. Версии, благоприятные для принтера, обычно включают тот же контент, что и основная веб-страница, но большинство графических, фонов и навигационных элементов опущены. Страница также преобразует цвет в некоторую форму для создания приемлемых изображений серого.
CSS Решение
Одним из преимуществ разделения контента и представления с использованием структурированных тегов XHTML и форматов CSS является то, что, изменяя стиль CSS, вы можете легко переформатировать контент. Следовательно, создание страницы, подходящей для принтера, состоит в том, чтобы связать другой файл CSS на одну и ту же страницу XHTML.
Вы можете одновременно связать лист стиля экрана и лист стиля печати с одним и тем же файлом xhtml, поэтому нет необходимости создавать страницу, удобную для принтера отдельно, достаточно лист стиля, удобного для принтера. Когда вы добавляете файлы мультимедийных типов в код ссылки, это говорит о браузере, каким правилам CSS следует следовать или игнорировать для вывода экрана, и какие правила использовать для распечатки.
Вот пример, ссылаясь на пару файлов CSS:
Ниже приведено цитируемое содержание:
<linkrel = styleSheetType = text/cssmedia = screenhref = mysite-screen.css/>
<linkrel = styleSheetType = text/cssmedia = printthref = mysite-print.css/>
Если вам нужно поддерживать более старые браузеры, вы должны придерживаться экрана CSS1 Media Descriptors и печати. Они взаимоисключающие, поэтому при создании страниц для дисплея экрана браузер игнорирует лист стиля печати и наоборот. Таким образом, каждая таблица стилей должна содержать один и тот же селектор стиля, но существуют разные объявления правил, чтобы генерировать стили страниц отдельно для различных выходных устройств.
Упростить CSS
Если вы готовы отказаться от заботы о старых браузерах и предположим, что ваши пользователи используют браузеры с поддержкой CSS2 (например, IE5 и выше или NetScape6 и выше), вы можете использовать новый дескриптор Media, чтобы значительно упростить код CSS.
Вот пример связывания с использованием дескрипторов CSS2 Media:
Ниже приведено цитируемое содержание:
<linkrel = styleSheetType = text/cssmedia = allhref = mysite-all.css/>
<linkrel = styleSheetType = text/cssmedia = printthref = mysite-print2.css/>
Эти ссылки почти точно так же, как и предыдущие; Разница в том, что файл CSS содержит стили для печати носителя.
Стили, связанные с Media = All в файле CSS, могут быть применены для дисплея экрана, печати и всех других носителей, так что вы можете поместить все созданные стили в этот файл. Файл CSS, который индивидуально связан с Media = Print, может быть намного меньше, потому что страница наследует все стили от всех медиа -файлов, поэтому нет необходимости копировать эти стили в файле печатных носителей.
Единственные стили, необходимые в файле CSS Print Media, - это то, что изменяют или добавляют стили страниц для распечатки. Вообще говоря, это не что иное, как некоторые стили, которые запрещают отображать DOV, содержащие графику и навигационное содержание, а также замена метки тела, а также ширину и пустые настройки основного DIV с настройками, подходящими для распечаток.
Этот трюк работает, потому что все файлы Media CSS и печатные файлы CSS печатают Media CSS, объединяются в те же правила каскадного стиля. Следовательно, порядок ссылок этих файлов CSS очень важен. Все ссылки на файлы мультимедиа должны быть размещены перед печати ссылок на файлы носителя.
Вот несколько советов по использованию файлов CSS Print Media:
Если вы запрещаете отображение DIV, вы должны использовать дисплей: нет вместо видимости: скрыто.
Ни точки, ни дюймы не являются правильными единицами измерения для дисплея экрана, но они являются правильными единицами измерения для распечаток.
Селектор, используемый при печати мультимедийных файлов, должен быть точно таким же, как и селектор, который вы используете во всех медиа -файлах. Например, если вы используете Div #sidenav для выбора DOV с ID в качестве Sidenav во всех файлах медиа -файлов, то использование #Sidenav в печати мультимедийных файлов может быть не в состоянии успешно достичь вашей цели.
Не забудьте явно заменить заявление правила, которое меняется от одного файла в другой. Например, если вы устанавливаете накладку для элемента во всех мультимедиа -файлах и хотите удалить эту накладку в распечатку, этого недостаточно, чтобы добавить стиль, который игнорирует объявление заполнения в файле печатных носителей - вы должны явно установить накладку: 0pt для замены предыдущих настроек.
Если вы используете графический редактор, такой как DreamWeaver, вы можете просмотреть эффект экрана сгенерированной страницы вместо эффекта распечатки. Чтобы предварительно просмотреть стиль печати в окне просмотра DreamWeaver Design, измените ссылку на файл CSS Print Media на экран Media =. Это позволяет вам предварительно просмотреть стиль CSS в файле печатных носителей. Не забудьте изменить дескриптор медиа обратно на Media = Print перед публикацией вашей страницы.
Когда вам нужно предоставить своим посетителям веб-страницу, удобную для принтера, вам больше не нужно создавать отдельную версию исходной страницы. Добавление ссылки на таблицу стилей CSS с Media = Print Media Descriptor может преобразовать любую страницу XHTML/CSS в страницу, благоприятную для принтера.