 |
|
Cоздание кнопки «Наверх»
Практическое задание к практической работе №4.
К выполненным на предыдущей практической работе страницам сайта добавить:
1. На все страницы сайта добавить Java-скрипт печати веб-страницы браузера;
2. Для страниц сайта создать кнопку «Наверх»;
3.При загрузке сайта добавить выплывающее окно с приветствием для накрутки;
4. На страницы сайта добавить ссылку на источник при копировании;
5. Разместить разработанный сайт на бесплатный хостинг, например наhttp://0hosting.me
6. Зарегистрировать сайт в поисковой системе.
Рекомендуемые источники:
Http://seo-mayak.com/seo-prodvizhenie/poiskovye-sistemy/registraciya-sajta-v-poiskovyx-sistemax-yandeks-google-bing-mail-ru.html
Печать web-страницы с вашего браузера
Конечно, можно изучать информацию прямо с экрана монитора, но очень многие пользователи Интернета, всё же предпочитают читать информацию с бумажных носителей, предварительно распечатав. В этом случае можно вооружившись карандашом делать какие-то пометки, выделить наиболее важные места и т.д.
А уж если речь идет о прайс-листах с десятками и сотнями наименований товаров, то тут даже и речь не идет о сравнениях - бумажные носители в этом случае побеждают однозначно.
Итак, как же добавить на web-страницу возможность прямой печати? Очень просто, достаточно в нужном месте (там где Вы хотите запускать функцию печати) разместить код Листинга 1.
| <FORM> <INPUT NAME="print" TYPE="button" VALUE=" Печать страницы " ONCLICK="varitext()"> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function varitext(text){ text=document print(text) } // End --> </SCRIPT> </FORM> |
Начало формы
Конец формы
Начало формы
Конец формы
Конечно же в коде можно заменить текст, который будет отображаться на кнопке, например написать неПечать страницы, а Распечатать страницу это уже на Ваш вкус.
Как и любой элемент, код Листинга 1 можно поместить например в теги абзаца <p> </p> или <div> </div> и отцентровать в соотвествии с дизайном сайта.
При нажатии на кнопку запускается интерфейс принтера (если он конечно есть у пользователя), откуда можно сразу же распечатать открытую web-страницу.
Cоздание кнопки «Наверх»
Когда на странице сайта расположено большое количество контента пользователь ознакомившись с ним и промотав страницу до определенного момента или до самого низа, часто начинает скролить ее верх, чтобы увидеть навигационные ссылки расположенные в верхней части страницы и\или произвести какие-то действия.
Чтобы добавить удобства пользователям и в целом улучшить юзабилити своего сайта лучше всего использовать для сайта кнопку вверх, нажав на которую пользователь автоматически перенаправляется в верхнюю часть страницы.
Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
<a href="#" title="Вернуться к началу"class="topbutton">^Наверх</a>
Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.
Пример CSS кода:
.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
Недостатки:
- Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
- Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
Cоздание кнопки «Наверх»вариант 2
В самый низ страницы, перед /body :
Код
<!-- <Кнопка Вверх> -->
<script type="text/javascript">
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#backop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<script type="text/javascript">
$(window).scroll(function(){
var s = $(window).scrollTop();
var f = $(document).height()-$(window).height();
var d=s/f*100;
var p=Math.round(d);
$("#pix").text(p);
});
</script>
<div id="back-top" style="position:fixed; width: 50px; height: 100%; z-index: 6; right: 10px; top: 90%; background: transparent; " id="layer2">
<center><a title="Вверх" id="backop" href="#top"><img src="http://megascripts.ru/demo/knopka_vverh_2/up.png" onmouseover="this.src='http://megascripts.ru/demo/knopka_vverh_2/up1.png'" onmouseout="this.src='http://megascripts.ru/demo/knopka_vverh_2/up.png'"></a></center>
<center><font color="#000000" size="3">
<span id="pix"></span>%</font></center>
</div>
<!-- </Конец> -->
Выплывающее окно с приветствием для накрутки
При загрузке страницы с данным скриптом, посетитель увидит выплывающее слева окно (к примеру с приветствием), которое через заданный промежуток времени уплывает вправо и там закрывается. Чем хорош данный способ для накрутки? Посетитель считает, что окно просто приветствует его, а на самом деле в пробегающем окне загружается страница спонсора (страница в странице).
Пример
Установите на вашей странице следующий HTML-код:
<head>
<script>
<!-- Beginning of JavaScript -
var popwindow
var popwindowwidth=200
var popwindowheight=150
var popwindowtop=20
var popwindowURL="СТРАНИЦА.htm"
var waitingtime=4
var pause=20
var step=40
var popwindowleft=-popwindowwidth-50
var marginright
var pagecenter
var timer
waitingtime= waitingtime*1000
function showWindow() {
popwindow = window.open(popwindowURL, "popwindow", "toolbar=no,width="+popwindowwidth+",height="+popwindowheight+",top="+popwindowtop+",left="+(-popwindowwidth)+"");
if (document.all) {marginright = screen.width+50}
if (document.layers) {marginright = screen.width+50}
pagecenter=Math.floor(marginright/2)-Math.floor(popwindowwidth/2)
movewindow()}
function movewindow() {if (popwindowleft<=pagecenter) {popwindow.moveTo(popwindowleft,popwindowtop)
popwindowleft+=step
timer= setTimeout("movewindow()",pause)}
else {clearTimeout(timer)
timer= setTimeout("movewindow2()",waitingtime)}
}
function movewindow2() {
if (popwindowleft<=marginright) {
popwindow.moveTo(popwindowleft,popwindowtop)
popwindowleft+=step
timer= setTimeout("movewindow2()",pause)}
else {clearTimeout(timer)
popwindow.close() }
}
// -->
</script>
</head>
<body onLoad="showWindow()">
</BODY>
Параметры скрипта: var popwindowwidth=200 (высота окна в пикселях); var popwindowheight=150 (ширина окна в пикселях); var popwindowtop=20 (расстояние от высшего края главного окна); var popwindowURL="СТРАНИЦА.htm" (URL или HTML-файл который будет открываться в окне); var waitingtime=5 (время в секундах для остановки окна).