No Image

Эмблему datalife engine версия для печати

0 просмотров
10 марта 2020

Страница сайта предназначаемая для печати в современном вебе уже не так актуальна как во времена ЭЛТ-мониторов и отстуствия постоянного онлайна, но в некоторых областях до сих пор есть спрос на такие страницы.

Встроенный в базовый набор движка DataLife Engine стиль шаблонов "версии для печати" совсем никакой. Предлагаем вам наш вариант оформления такой страницы.

Из наиболее полезных функций:
— Автоматически генерируемый QR код адреса страницы.
— Кнопка отправки страницы на печать.
— Поддержка стилей скрываемых/отображаемых свое содержимое при печати.

Для самых нетерпеливых сам код файла print.tpl

И комментарии по коду шаблона:

В качестве основы используем Bootstrap 3 со ссылками на CDN.
Дополнительно для корректной работы спойлеров в шаблон подключены JS файлы непосредственно из движка.

Для отображения логотипа сайта мы используем заглушку http://imgholder.ru/320×100/F4F4F4/000000&text=Site+Logo
ее необходимо заменить на прямой URL вашего логотипа.

обратите внимание:
логотип указан 2 раза подряд.

в первом случае

Класс visible-print входящий в комплект к Bootstrap 3 отображает свое содержимое только на печати.
Но так-же на печати отображаются ВСЕ ссылки встречаемые на странице (что логично, так как иначе будет невозможно получить информацию на бумаге о гиперссылках в тексте.

Что-бы на печати наш логотип не был перечеркнут текстовой ссылкой, мы второй раз добавляем логотип сайта в блоке

Класс hidden-print отображается только в браузере и автоматически исчезает на листе бумаги.
Логотип сайта в данном блоке обернут тегами ссылки на основную (не печатную версию) страницы и позволяет в 1 клик вернуться назад (если печатная версия не потребовалась).

О пользе версии для печати в шаблоне для смартфонов.

В самом начале такая мысль казалось бредовой, экран смартфона для того и нужен, что-бы не переводить бумагу.
Но диалог печати на Android (при использовании Google Chrome) позволяет воспользоваться шикарной фичей для оффлайн чтения.

При клике на кнопку "печать" в нашем шаблоне print.tpl Хром создаем версию в виде файла PDF
который замечательно сохраняется во внутренней памяти телефона.

Ну а далее Вы по своему усмотрению можете в любой момент времени без интернета прочитать полученную копию страницы в PDF (главное, что-бы была установлена нужная читалка данного формата).

Актуальная версия шаблона страницы для печати доступна на bitbucket

Живые примеры шаблонов страницы "версия для печати"

  • blogssmartzone.com — обычная текстовая статья на блоге.
  • Ana-sm.com — статья с использованием таблиц внутри текста. Если стили таблиц отличаются от bootstrap то их необходимо добавить в print.tpl.
  • fiat-ac.ru — версия страница автодилера с информацией по акциям. Используются теги цитаты.
  • stgroup-cpt.ru — пример коммерческого предложения о грузовом транспорте с использованием данных из дополнительных полей движка.
  • Видео с примером работы "версии для печати" и сохранения из нее файла PDF

    Читайте также:  Packard bell easynote lx86 jo 500ru

    Для самых нетерпеливых сам код файла print.tpl

    И комментарии по коду шаблона:

    В качестве основы используем Bootstrap 3 со ссылками на CDN.
    Дополнительно для корректной работы спойлеров в шаблон подключены JS файлы непосредственно из движка.

    Для отображения логотипа сайта мы используем заглушку http://imgholder.ru/320×100/F4F4F4/000000&text=Site+Logo
    ее необходимо заменить на прямой URL вашего логотипа.

    обратите внимание:
    логотип указан 2 раза подряд.

    в первом случае

    Класс visible-print входящий в комплект к Bootstrap 3 отображает свое содержимое только на печати.
    Но так-же на печати отображаются ВСЕ ссылки встречаемые на странице (что логично, так как иначе будет невозможно получить информацию на бумаге о гиперссылках в тексте.

    Что-бы на печати наш логотип не был перечеркнут текстовой ссылкой, мы второй раз добавляем логотип сайта в блоке

    Класс hidden-print отображается только в браузере и автоматически исчезает на листе бумаги.
    Логотип сайта в данном блоке обернут тегами ссылки на основную (не печатную версию) страницы и позволяет в 1 клик вернуться назад (если печатная версия не потребовалась).

    О пользе версии для печати в шаблоне для смартфонов.

    В самом начале такая мысль казалось бредовой, экран смартфона для того и нужен, что-бы не переводить бумагу.
    Но диалог печати на Android (при использовании Google Chrome) позволяет воспользоваться шикарной фичей для оффлайн чтения.

    При клике на кнопку "печать" в нашем шаблоне print.tpl Хром создаем версию в виде файла PDF
    который замечательно сохраняется во внутренней памяти телефона.

    Ну а далее Вы по своему усмотрению можете в любой момент времени без интернета прочитать полученную копию страницы в PDF (главное, что-бы была установлена нужная читалка данного формата).

    Актуальная версия шаблона страницы для печати доступна на bitbucket

    Живые примеры шаблонов страницы "версия для печати"

  • blogssmartzone.com — обычная текстовая статья на блоге.
  • Ana-sm.com — статья с использованием таблиц внутри текста. Если стили таблиц отличаются от bootstrap то их необходимо добавить в print.tpl.
  • fiat-ac.ru — версия страница автодилера с информацией по акциям. Используются теги цитаты.
  • stgroup-cpt.ru — пример коммерческого предложения о грузовом транспорте с использованием данных из дополнительных полей движка.
  • Видео с примером работы "версии для печати" и сохранения из нее файла PDF

    Навигация:

    Урок номер 7
    Меняем логотип, делаем навигацию, меняем копирайты,
    меняем рекламный блок, редактируем форму поиска


    1. Меняем логотип — main.tpl

    По сравнению с предыдущими уроками — этот урок как легкая прогулка по сравнению с тюжелым путешествием по горам.

    Итак меняем логотип, открываем файл main.tpl. Где в нем находятся модули мы уже знаем из предыдущего
    урока, а где же логотип? смотрим в самое начало кода — это таблица сразу после тега body, вот она:

    Читайте также:  Предиктивный набор на андроид

    Код1

    Сделать стартовойДобавить в закладки

    В этой же таблице находятся и кнопки навигации — их мы удалим, чуть позже мы сделаем свое меню навигации.

    Итак ваша задача — подготовить свой логотип — оформление верхней части сайта.

    Удаляем оригинальный код и вместо него вставляем этот:

    Код 2

    Далее в файле css/style.css внизу вставляем такой код:

    Код 3

    #masthead <
    position: absolute;
    top: 0px;
    left: 2%;
    right: 2%;
    width:95.6%;
    >

    #pageNav <
    float: left;
    width:178px;
    padding: 0px;
    background-color: #F5f7f7;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    font:small Verdana, Geneva, Arial, Helvetica,
    >

    #globalNav <
    position: relative;
    width: 100%;
    min-width: 640px;
    height: 32px;
    color: #cccccc;
    padding: 0px;
    margin: 0px;
    background-image: url("../pics/glbnav_background.gif");
    background-repeat: repeat-x;
    >

    #globalNav img <
    margin-bottom: -4px;
    >

    #gnl <
    position: absolute;
    top: 0px;
    left:0px;
    >

    #gnr <
    position: absolute;
    top: 0px;
    right:0px;
    >

    #globalLink <
    position: absolute;
    top: 9px;
    height: 22px;
    min-width: 640px;
    padding: 0px;
    margin: 0px;
    left: 10px;
    z-index: 100;
    >

    a.glink, a.glink:visited <
    font-size: 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
    >

    a.glink:hover <
    background-image: url("../pics/glblnav_selected.gif");
    text-decoration: none;

    Этот код — это оформление всей верхушки сайта, логотип, ссылки, расположение и т.д.

    Далее в файле css/style.css находим

    html,body <
    height:100%;
    margin:0px;
    padding: 0px;
    background: #FFFFFF;
    font-size: 11px;
    font-family: tahoma;
    >

    html,body <
    height:100%;
    margin:0px;
    padding: 0px;
    background: #333333;
    font-size: 11px;
    background: #cccccc url("../pics/bg_grad.jpg") fixed;
    font-family: tahoma;
    >

    В файле main.tpl находим строку:

    В файл style.css добавляем такие строки:

    .tt <
    background: transparent;
    background: #cccccc url("../pics/bg_grad.jpg") fixed;
    >

    наша страничка выглядит все лучше и лучше, продолжаем править ее

    В файл style.css находим и удаляем такие строки:

    table td <
    padding:0px;
    >

    В файле main.tpl находим строку:

    Сразу чуть ниже этой строки находим

    Скриншот будет чуть дальше, когда офрмим все нужные части шаблона., они все мелкие и уместтся в один скриншот.

    2. Вставляем меню навигации — main.tpl

    речь идет не о меню со списком разделов, о нем мы говорили еще на первом уроке, речь идет о меню самого сайта,
    какие ссылки там должны быть? вот они:

    /index.php — главная страница
    /index.php?do=register — регистрация
    /index.php?subaction=newposts — новые статьи на сайте
    /index.php?do=stats — статистика
    /index.php?do=feedback — обратная связь
    /engine/rss.php — RSS 2.0

    Меню можно делать текстовыми ссылками, а можно сделать графическими кнопками или на флеш — все зависит от вашей фантазии.

    Меню мы уже добавили, смотрите КОД 2, 1-я часть кода это логотип, вторая — меню навигации, классы в CSS мы уже прописали, класс globalLink, glink отвечают за меню и его офрмление+расположение относительно элементов страницы.

    вот код меню отдельно

    Меню готово

    3. Меняем рекламный блок

    Тут совсем просто, открываем main.tpl, находим там строки

    Код 4

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

    Рекламный блок — заголовок
    — этот тег выводит сам баннер (настраивается в админке)

    берем нашу самую простую таблицу из info.tpl и редактируем, убирая лишнее ив ставляя заголовок и тег вывода баннера, вот что получилось

    КОД 5

    Рекламный блок

    4. Меняем форму поиска

    В файле main.tpl находим код формы поиска:

    КОД 6

    Удаляем и вставляем свой:

    Форма поиска готова.

    5. Меняем копирайты — те, что стоят внизу страницы -main.tpl

    ВНИМАНИЕ! Полностью убрать копирайты на движок может только тот кто его купил, все тко пользуются бесплатной версией копирайты должны оставить.

    Открываем main.tpl, в самом низу находим код:

    Copyright © 2006. SoftNews Media Group All Rights Reserved — это и есть копирайты, за их оформление отвечает класс copy, в style.css, вот он:

    Код 8

    .copy <
    color: black;
    font-size: 11px;
    font-family: tahoma;
    padding: 5px;
    >

    .copy a:active,
    .copy a:visited,
    .copy a:link <
    color: #5E85B0;
    text-decoration:none;
    >

    .copy a:hover <
    color: #727272;
    text-decoration: underline;
    >

    Вот код самого блока, находится он в самом низу страницы main.tpl

    Код 9

    /images/lbgbottom.gif» align=»right» > Copyright © 2007. SoftNews Media Group All Rights Reserved

    Здесь же дублируется меню навигации.

    Удаляем весь этот код.

    ищем (main.tpl) тег , сразу после него вставляем:

    Код 10

    Ну и напоследок остались еще два тега в странице main.tpl которые я не описал, хотя это есть и в мануале

    — выводит служебную информацию движка, напоминания о регистрации к примеру или сообщение о том, что
    новость успешно добавлена и т.д.

    — Вывод контента на сайте, новостей, обратной связи регистрации и прочего, основная колонка

    На это у меня все. Успехов!

    Комментировать
    0 просмотров
    Комментариев нет, будьте первым кто его оставит

    Это интересно
    No Image Компьютеры
    0 комментариев
    No Image Компьютеры
    0 комментариев
    No Image Компьютеры
    0 комментариев
    Adblock detector