Отправляет email-рассылки с помощью сервиса Sendsay

Интернет-дизайн и мастеринг - полезные советы

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр Левитас

Статистика

7.438 подписчиков
+5 за неделю
←   Все выпуски   →

Интернет-дизайн и мастеринг: советы Dia-Studia HTML-слайды и распечатка нужных элементов страницы


Информационный Канал Subscribe.Ru
Статья №5: «HTML-слайды и печать документа» (02.06.2005) Все свои пожелания, соображения или возражения Вы можете отправлять по адресу dia-studia@yandex.ru Dia
Studia

Для начала поздравляю всех с наступлением лета! :)

Не так давно мне на ящик пришло письмо от одной читательницы, с двумя вопросами, которые, как мне кажется, покажутся довольно интересными и другим читателям. К сожалению, делать рассылку чаще, чем раз-два в месяц у меня не получается, поэтому очень надеюсь, что представленная информация для читательницы ещё актуальна. Если же нет, то она окажется интересной для кого-то ещё.

Поэтому в этом выпуске будут даны ответы на вопросы читательницы, а разговор об остальных блоках документа отложим временно на следующие выпуски. Итак...

Что такое HTML-слайды и как их можно сделать?

Собственно HTML-слайды не отличаются от прочих слайдов: это показ через определённый промежуток времени какой-либо информации — текста, графики, их сочетаний, и т.п. Способы отображения этой информации могут быть различны — на вкус создателя или заказчика. К примеру, информация может просто меняться по таймеру (смена одной картинки/текста другими), а может «сползать» сверху, подниматься снизу или же появляться справа или слева в окошке, отведённом под слайды, и прочее. «Окошко» может в действительности быть отдельным окном браузера (лучше с кнопками «вперёд», «назад», «первый слайд», «последний слайд», «стоп», «заново» и т.п. — не обязательно все, это просто примеры; эти кнопки можно сделать в виде символов «<<», «>>» и пр. или в виде картинок), а может быть iframe'ом, фреймом или просто областью на странице. Как вам угодно. Можно организовать слайды с помощью Flash-технологии, а затем разместить объектом на странице, можно даже загружать на страницу объекты ActiveX.

В любом случае придётся разрабатывать алгоритм: вам необходим таймер, по событиям которого будут меняться слайды.

Можно написать сценарий на JavaScript, VBScript, можно на ActionScript (для Flash) или же заставить страницу обновляться через определённые промежутки времени — при этом на сервере генерировать новую страницу (с новым слайдом) и передавать её клиенту, и т.п. Можно использовать Java-апплеты. Всё что угодно. Технология показа слайдов одна и та же везде. Только, на мой взгляд, хорошим тоном будет дать пользователю возможность управлять показом (к примеру, используя указанные выше кнопки).

Слайды могут применяться и для рекламных целей (например, показ баннеров, которые сменяют друг друга), но тут уже нет управления со стороны пользователя.

На языке клиента (например, JavaScript) можно использовать такой алгоритм (упрощённо):

  1. задать массив с информацией, которую будете выводить (в каждый элемент массива вписать какие-то данные: хоть картинки («<img>»), хоть просто текст).
  2. вызвать начальную функцию, где устанавливается таймер, например setInterval("doslide()",pause) или setTimeout("doslide()",pause), где doslide() — это функция, в которой выполняются определённые действия по смене (и, к примеру, повороту) слайда (название функции любое). Функция setInterval — это метод объекта window, который вызывает функцию (в данном случае doslide()) или вычисляет выражение каждый раз по прошествии миллисекунд pause, функция же setTimer делает это только один раз. При смене слайда пользоваться информацией в элементах заранее заполненного массива (можно также выбирать элементы случайным образом).

Более подробную информацию, в том числе с полными кодами слайд-просмотрщиков можно найти по адресу http://dynamicdrive.com или же на русском сайте http://www.superbest.ru/ — тут есть и пример, и код.

Как сделать, чтобы на Web-странице был значок ПЕЧАТЬ? Чтобы распечатывался только текст, а не полностью страница сайта

Наверняка возможностей решить эту задачу существует несколько. Но я приведу здесь такой способ: перед самой печатью скрываем «лишние» элементы (те, которые не должны выводиться на печать) с помощью стилей CSS, а те, которые нужны, оставляем. После печати скрытые элементы показываем вновь. При этом документ загружаться заново не будет (полезно для тех, кому критичен трафик). Скрытие, отображение и печать будем осуществлять с помощью функций JavaScript, поэтому рекомендую вам проверять, поддерживает ли браузер пользователя этот клиентский язык. Итак, вот пример кода:

1 <html>
2 <head>
3 <style type="text/css">
4  .nohide {}
5 </style>
6 <script type="text/JavaScript" language="JavaScript">
7 <!--
8 //*
9 var btag;
10 function beg_tag() {btag=6;};
11 function show_hide(dispval) {
12  for(i=btag;i<document.all.length;i++) {
13   obj=document.all[i];
14   if(obj.className!="nohide") obj.style.display=dispval;
15  };
16 };
17 function printit() {
18  show_hide('none'); print(); show_hide('');
19 };
20 //-->
21 </script>
22 </head>
23 <body onLoad="beg_tag()">
24 <h3 class="nohide">Пример распечатки только нужных элементов страницы</h3>
25 <img src="1.png" width="100" height="100" border="0">
26 <div>Этот текст и картинка выше будут спрятаны при распечатке, а картинка ниже будет выведена</div>
27 <img src="2.png" width="100" height="100" border="0" class="nohide">
28 <br />
29 <input type="button" value="Печать" onClick="printit()">
30 </body>
31 </html>

Теперь построчно разберём, как он работает. В третьей (3) строке открывается тег объявления стилей CSS, а в 4-ой объявляется класс nohide с пустым стилем (здесь не важно, что тут указывать, главное — то, что свойство display (отображение элемента) у этого класса не установлено в «none» (скрыть), т.е. чтобы его элементы отображались на странице). Обратите внимание, что в строках 24 и 27 для элементов (тегов) указан определённый выше класс nohide (выделено полужирным начертанием) — эти элементы будут распечатаны, остальные будут скрыты.

Теперь перейдём к строке 23, где начинается тело документа. Здесь используется событие DHTML — onLoad (по открытию/загрузке страницы в браузер). И по этому событию вызывается функция beg_tag() — её описание смотрим в строке 10-ой кода. Ранее, в строке 9, определена переменная btag, призванная здесь содержать в себе номер тега, с которого начинается важная часть документа (у меня это тег <h3>, а номер его 6). В данном случае я просто задаю этой переменной некоторое значение, соответствующее ситуации — вам же советую не указывать такие жёсткие значения, а написать скрипт, вычисляющий этот номер (подсказка: можно использовать свойства document.all.lenght и document.all.tagName — последнее сравнивать с нужным вам тегом (в данном случае с «H3»). Почему я не проверяю просто все теги подряд, а начинаю с <h3>? Потому что теги без класса nohide будут скрыты, а скрывать теги <html>, <head>, <style>, <script>, <body> совершенно ни к чему.

Итак, когда все приготовления (почти все — читайте ниже) сделаны, перейдём к основной части скрипта. И для этого посмотрите на строку 29. В ней по событию onClick (по щелчку мыши) на кнопке «Печать» вызывается функция printit(), которая тоже является пользовательской и определена в коде, начиная со строки 17. Что делает эта функция? Она вызывает другую функцию — show_hide() с параметром 'none', которая скрывает «лишние» элементы (именно благодаря значению параметра). Затем функция printit() выводит содержимое страницы на печать (стандартная функция (метод) окна — print()), и снова вызывает функцию show_hide(), но уже с пустой строкой в качестве параметра, что позволяет отобразить ранее скрытые элементы страницы. Скрытие и отображение происходит очень быстро (скорость зависит от количества информации на странице), поэтому визуально пользователь может даже не ощутить этой манипуляции. Но на печать выводится именно то, что нам нужно. А теперь далее.

Рассмотрим саму функцию show_hide(). Она определяется со строки 11-ой кода. У функции есть параметр dispval — значение для свойства display (отображение) элементов, которое будет им присвоено. Оно может быть либо 'none', либо '' (пустая строка). Далее находим все теги документа (по порядку) и устанавливаем их видимость (display) в то значение, которое содержит параметр dispval. Для этой цели в строке 12 начинается цикл for, в котором для реализации цикла используется переменная i. Её начальное значение устанавливается числом, вычисленным ещё при загрузке страницы в браузер, — btag (как вы помните, у нас оно равно «6»). А конечное значение определяется как document.all.length — количество тегов документа (рекомендую вам вынести вычисление этого количества за пределы цикла for, чтобы оно не вычислялось каждый раз заново, чем увеличивается время выполнения скрипта, — здесь так не сделано для наглядности кода).

В строке 13 в переменную obj получаем html-дескриптор очередного (i-го) элемента, а в строке 14 проверяем, к какому классу (className) он принадлежит: если не к nohide, то свойство display (отображение) этого элемента устанавливаем в значение, передаваемое функции (dispval). Таким образом, получается, что если dispval='none', то элемент скрывается, а если dispval='', то отображается. При этом, если класс у элемента не был указан, то вернётся пустое значение (className=''), что также не будет равно 'nohide'.

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

И напоследок дополню (это и будет ещё одним «приготовлением», отложенным на потом): посмотрите на строку 8 кода. Здесь оставлено место. Советую вам разместить здесь сценарий определения типа браузера и, в соответствии с полученным результатом, указывать в приведённом выше коде либо document.all, либо document.layers, либо document.getElementById — иначе некоторые браузеры не будут выполнять ваш сценарий, а пользователи не смогут распечатать то, что им нужно. Указанный выше код подходит только для браузера IE и с ним совместимых. Не забудьте также, что document.style тоже годится не для всех браузеров — для некоторых слово «style» нужно опустить. А если вы всё это учтёте, то можно использовать функцию eval() с параметром-строкой кода, который нужно выполнить. Эта функция очень часто пригождается для осуществления динамического создания кода и его выполнения.

Конечно, вы всегда можете воспользоваться «банальным» (но на практике очень полезным) вариантом: подготовьте «версию для печати» своего документа, т.е. страницу, на которой не будет лишней информации. Эту страницу пользователь сможет распечатать либо с помощью встроенных средств браузера, либо вы можете разместить на ней кнопку «Печать», только тогда распечатается и сама кнопка тоже. Вот примерный код такой кнопки, которая на самом деле тоже использует средства браузера:

<input type="button" value="Печать" onClick="JavaScript:print()">

Всего вам хорошего и успешного творчества!

© Dia-Studia, 31 мая 2005 г., dia-studia@yandex.ru, http://www.dia-studia.h14.ru/
При использовании материала для распространения, пожалуйста, указывайте ссылку на автора. Спасибо! ;)

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: comp.design.diastudia 		Отписаться
Вспомнить пароль
В избранное