РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру Форма для сообщения в виде пишущей машинки


Форма для сообщения в виде пишущей машинки

В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с помощью CSS и jQuery.

 

Принцип работы

Нашу пишущую машинку можно использовать 3 различными способами: можно вводить сообщения с клавиатуры или нажимая изображения клавиш с помощью мыши или сенсорного экрана.

В области клавиатуры располагаются изображения интерактивных клавиш. Каждое изображение повторяет манипуляции с реальной клавиатурой, за исключением клавиши Tab, так как она служит для переключения между окнами в операционной системе. Область текста соответствует листу бумаги. Здесь вы будете видеть введенный текст. Область текста может раздвигаться по вертикали бесконечно, пока вы не нажмете клавишу Отправить, после этого лист заменяется на новый, и вы сможете писать новое сообщение. Обе области размещаются в одном контейнере div.

 

Как отправлять сообщения?

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

 

Используем свойство @font-space 

Для нашей формы мы будем использовать свойство @font-face. Особенностью данного свойства является то, что мы можем задействовать специфические шрифты в дизайне, и при этом будем уверенны, что у всех, кто будет просматривать нашу страницу, надписи будут отображаться одинаково. Потому что в действительности шрифты будут подгружаться с определенного адреса URL и посетители смогут их видеть без установки на свой компьютер.

Кроме того, из хранилища  Google будет подгружаться шрифт Lobster. Это еще один способ обеспечить поддержку оригинальных шрифтов в веб проектах.

 

Вызываем библиотеку для работы со звуком в нашей пишущей машинке

Для создания полноценного эффекта работы на пишущей машинке мы используем соответствующие звуки (нажатие клавиши, проворачивание каретки с бумагой, и так далее). Для интеграции всех звуковых эффектов с нашим проектом используется библиотека SoundManager 2. Она позволяет предоставляет API для JavaScript, которое выполняет поддержку звука в HTML и FLASH.

Так осуществляется отличная кросс-браузерная поддержка звука для нашей формы. К сожалению, HTML5 пока не может гарантировать такого же уровня поддержки различными браузерами, поэтому приходится опираться на технологии FLASH.

Шаг 1. Создаем HTML файл

Нам нужен основной файл с разметкой, который будет являться скелетом нашего проекта. Так что создаем документ HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Форма в виде пишущей машинки</title>
</head>

<body>
</body>
</html>

 

Шаг 2. Создаем элементы интерфейса

Для построения интерфейса нам потребуется несколько графических элементов, которые будут воспроизводить образ пишущей машинки.

 

Шаг 3. Создаем код CSS

Используя изображения элементов интерфейса, создаем код CSS:

* {
margin: 0;
padding: 0;
}
/* изображение для формирования фона */
body {
background-image: url('../img/i27x7ym.jpg') ;

}

/* Контейнер, который содержит нашу пишущую машинку */
#container {
margin: 100px  auto 0 auto  ;
width: 1300px;
position:relative;

}
 
/* Пишущая машинка без клавиш */
#typewritter{
	height:858px;
	width:845px;
	background: transparent url(../img/machine_2.png) no-repeat 0 0;
	position:relative;
	top:120px;
	z-index:2;
}
/* В контейнере write выводится текст сообщения. При загрузке он имеет
ширину 477px и высоту 58 px. Высота может программно изменяться до 260 px. */
#write {
margin: 0 200px;
padding:5px;
width: 477px;
height: 58px;
*height:66px;
font-family: 'B52Regular', Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
color:#000;
background: transparent url(../img/sheet_2.png) no-repeat top left;
line-height:30px;
*line-height:30px;
border:none;
position:absolute;
top:105px;
*top:75px;
z-index:3;
outline:none;
resize:none;
overflow-y:hidden;

}
/* Параметры контейнера для клавиатуры */
#keyboard {
width:auto;
*width:614px;
margin: 0 100px 0 140px ;
list-style: none;
position:absolute;
z-index:3;
overflow:hidden;
top:490px;
}
	/* Параметры элемента li в списке #keyboard*/
	#keyboard li {
	float: left;
	margin: 0 0 0 0;
	width: 40px;
	height: 49px;
	line-height: 40px;
	text-align:	 center;
	font-family: 'Lobster', arial, serif;
	font-size:16px;
	color:#4B3005;
	text-shadow: -1px -1px 1px #ccc;
	}
		/* фон для всех клавиш */	
		li.letter,li.symbol {
				background: transparent url(../img/key.png) no-repeat  center  5px;	
			}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			/* Фон для клавиш Tab, Удалить и Return */	
			#keyboard .tab, #keyboard .delete ,#keyboard .return {
				background: transparent url(../img/shift_key.png) no-repeat   center  7px;
					width: 58px;
			}
			#keyboard .delete {
				font-size:12px;
			}
			/* Фон для клавиши Caps Lock */	
			#keyboard .capslock {
				background: transparent url(../img/return.png) no-repeat -2px 5px;									
				width: 104px;
			}	
			/* Фон для клавиш Shift*/				
			#keyboard .left-shift, #keyboard .right-shift {
				background: transparent url(../img/shifts_keys.png) no-repeat   center  7px;
					width: 90px;
			}

		.lastitem {
				margin-right: 0;
		}
		/* Используется для символов в режиме верхнего регистра */
		.uppercase {
		text-transform: uppercase;
		}
		/* Стили для клавиши пробела*/						
		#keyboard .space {
		clear: left;
		width: 544px;
		*width: 534px;		
		background: transparent url(../img/key_space.png) no-repeat  center center;
		}
		/* Стили, которые используются при удерживаемой клавише Shift */								
		.on {
		display: none;
		}
		/* Курсор мыши при прохождении над клавишей */
		#keyboard li:hover {
		cursor: pointer;
		}
		
		/* Стили для клавиши Отправить*/								
		li#send {
				font-size:14px;
				color:#4B3005;
				text-shadow: -1px -1px 1px #fff;
				width:80px;
				background: transparent url(../img/shifts_keys.png) no-repeat    center center;
		}

 

Шаг 4. JavaScript

  
 var top_init=105;/*Начальная позиция (область текста)*/

 var browser_info= new Array();
    jQuery.each(jQuery.browser, function(i, val) {
			browser_info[i]=val;

    });

(function($) {

    /*
     * Автоматическое расширение области текста
     */
    $.fn.autogrow = function(options) {
        
        this.filter('textarea').each(function() {
            
            var $this       = $(this),
                minHeight   = $this.height(),
                lineHeight  = $this.css('lineHeight');
            
            var shadow = $('<div></div>').css({
                position:   'absolute',
                top:        -10000,
                left:       -10000,
                width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
                fontSize:   $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize:     'none'
            }).appendTo(document.body);
            for(var i in browser_info )
				{
					if(i==='msie' )
						{
							var top_init=24;
							break	;
						}
						else{
								var top_init=20;							
								break;	
							}
						
				}
            var update = function() {
    
                var times = function(string, number) {
                    for (var i = 0, r = ''; i < number; i ++) r += string;
                    return r;
                };
                
                var val = this.value.replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/&/g, '&amp;')
                                    .replace(/\n$/, '<br/>&nbsp;')
                                    .replace(/\n/g, '<br/>')
                                    .replace(/ {2,}/g, function(space) { return times('&nbsp;', space.length -1) + ' ' });
                
                shadow.html(val);
				var top_o=parseFloat($(this).css('height'));
				/* В данной части процесс проверки определяет выход области текста за высоту 260px.*/
				if (top_o<260 || shadow.height()<=240)					
					{
				       	$(this).css('height', Math.max(shadow.height() + top_init, minHeight));
						$(this).css('overflow-y','hidden' );							
					}
				if (top_o==260 || top_o==272)					
						{
							$(this).css('overflow-y','auto' );							
						}
			 		if (top_o<parseFloat($(this).css('height')))
						{
							var top=parseFloat($(this).css('top'));

							$(this).css('top', big = (top===105) ? top-22 : top-30 );
							 var aSoundObject2 = soundManager.createSound({id:'mySound1',url:'sound/typewriter_line_break.mp3'});aSoundObject2.play();		  		  
							 /*  Запускаем звуковой эффект в случае новой строки */
						}
			 		if (top_o>parseFloat($(this).css('height')))
						{
							var top=parseFloat($(this).css('top'));
							$(this).css('top',big = (top===83) ? top+22 : top+30);
						}

				

            }

            $(this).change(update).keyup(update).keydown(update);
            update.apply(this);
            
        });
        
        return this;
        
    }
    
})(jQuery);

/* Функция определяет, что клавиша нажата в режиме Caps Lock */
function isCapslock(e){

	var ascii_code	= e.which;
		var shift_key	= e.shiftKey;
		if( (65 <= ascii_code) && (ascii_code <= 90) && !shift_key )
		{
			return true
		}
		else
		{
			return false;
		}
}



  
  var $keyboard = jQuery.noConflict();	/*Загружаем переменную jQuery, чтобы исключить конфликты */
  var caps_lock=false;
  var atCount = 2;/* Начальное значение счетчика строк. Должно иметь значение 2*/
  var control_sc=false;/* Состояние прокрутки, когда создается новая строка */
  var click_focus=false;
  
  /* Область текста получит фокус ввода при загрузке страницы  */
	$keyboard(document).ready(function(){
	$keyboard("#write").focus();
	
  });
  
  $keyboard(function() {
    $keyboard('#write').autogrow();
  });

  /* Обработка событий мыши */
  $keyboard(function(){
	  var $write = $keyboard('#write'),
		  shift = false,
		  capslock = false;
	  /* События mousedown и mouseup обрабатываются только для виртуальной клавиатуры */
	  $keyboard('#keyboard li').bind({
		   mousedown: function() {
				  /*При поступлении события mousedown изображение клавиши смещается на два пикселя по вертикали и горизонтали */
			  $keyboard(this).css('position','relative');
			  $keyboard(this).css('top','2px');
			  $keyboard(this).css('left','2px');
			  $keyboard(this).css('border-color','#e5e5e5');	

			  var $this = $keyboard(this),
			  
				  character = jQuery.trim($this.html()); 
		  if (! $this.hasClass('send'))
		  {

     			 if ($this.hasClass('return'))
				 {
		  			 /*  Проигрываем звуковой эффект при нажатии клавиши Return - перевод на новую строку */					 
	  			 	 var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
					 aSoundObject1.play();		  		  
				 }
			 else{
		  			 /*  Проигрываем звуковой эффект нажатия клавиши */
					 var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
					 	aSoundObject.play();		  		  
		  
				 }
				

			  // Клавиша Shift
			  /* Изменяем состояние клавиш */
			  if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
				  $keyboard('.letter').toggleClass('uppercase');
				  $keyboard('.symbol span').toggle();
			  
				  shift = (shift === true) ? false : true;
				  capslock = false;
				  return false;
			  }
		  
		  // Клавиша Caps lock
			  /* Изменяем регистр клавиш */
			  if ($this.hasClass('capslock')) {
				  $keyboard('.letter').toggleClass('uppercase');
				  capslock = true;
				  return false;
			  }
		  
		  // Клавиша Удалить
  				/*Удаляем символ*/
				  if ($this.hasClass('delete')) {	
  
					  document.getElementById('write').value=document.getElementById('write').value.substr(0, document.getElementById('write').value.length - 1);
				  return false;
			  }
		  
		  // Специальные символы
		  
			  if ($this.hasClass('symbol')) character = $keyboard('span:visible', $this).html();
			  if ($this.hasClass('space')) character = ' ';
			  if ($this.hasClass('tab')) character = "\t";
			  if ($this.hasClass('return')) character = "\n";


		  // Символы в верхнем регистре
			  if ($this.hasClass('uppercase')) character = character.toUpperCase();
		  
		  // Удаляем влияние клавиши Shift как только была нажата символьная клавиша.
			  if (shift === true) {
				  $keyboard('.symbol span').toggle();
				  if (capslock === false) $keyboard('.letter').toggleClass('uppercase');
			  
				  shift = false;
			  }
		  				if(click_focus==true)
						{
						  $keyboard('#write').val('');
						  click_focus=false;
						}
		  // Добавляем символ
						  if (! $this.hasClass('delete')) {	
							  document.getElementById('write').value+=character;
						  }
			    $keyboard('#write').autogrow();						  
				/* Если имеется более одной строки, то проводится автоматическое расширение области текста  */						  
			 
			  }

			},
			   mouseup:  function (){
			/* При наступлении события mouseup восстанавливаем прежнее положение клавиши*/
			  $keyboard(this).css('position','static');
			  $keyboard(this).css('top','2px');
			  $keyboard(this).css('left','2px'); 
			  $keyboard(this).css('border-color','#000');	
			  	if(! $keyboard(this).hasClass('send'))
				{
				  $keyboard("#write").focus();
				}
			}
			
	  });
	  /* При нажатии клавиши Отправить, формируем email и удаляем все из области текста */
	  $keyboard('#send').stop(true,true).click(function()
	  {
	  			 /* Генерируем звуковой эффект нажатия на клавишу Отправить */					 
				 var aSoundObject5 = soundManager.createSound({id:'mySound5',url:'sound/typewriter-paper-1.mp3'});aSoundObject5.play();		  		  													 
				 /* Анимация изменения страницы выполняется одновременно с генерацией звукового эффекта */
				$keyboard('#write').animate({"top": "-=300px"},'fast',function() {
				var message=$keyboard(this).val();
				$keyboard(this).css('height','58px');
				$keyboard(this).val('     Письмо отправлено    ');
				$keyboard(this).css('top','163px');
				$keyboard(this).css('overflow-y','hidden' );				
				$keyboard(this).css('z-index','1');
				$keyboard(this).animate({"top": "-=58px"},'slow',function(){
					$keyboard(this).css('z-index','3');
					/* Запускаем PHP скрипт, который отправляет сообщение*/
					$keyboard.post("Mail/sendmail.php", { mail:message  },
										function(data){
									
										});
					});		
					click_focus=true;				

				});
				

  	  });
	  
	  /* Здесь выполняется обработка нажатия клавиш на реальной клавиатуре */
	  var keypressed = 0;

	  $keyboard('#write').bind(
	  {
		  /*Обработка данного события аналогична обработке события mousedown для клавиши виртуальной клавиатуры */
		  click:function(event){
					if(click_focus==true)
						{
						  $keyboard('#write').val('');
						  click_focus=false;
						}
			  },
		  
		  keydown:	function(event) {

			  var lowercase=String.fromCharCode(event.keyCode);


			  switch(event.keyCode)
				{
					case 8:
						lowercase='delete';
					break;
					case 13:
						lowercase='return';
						break;
					case 16:
						lowercase='shift';
					break;						
					case 20:
					 	lowercase="caps lock";

 							if (isCapslock(event)===true ||caps_lock===false)
							{
								if (caps_lock===false)
								{
								$keyboard('.letter').toggleClass('uppercase');	
								caps_lock=true;
								}
							}
							else
							{
								if (event.keyCode!=32)
								{
									if (caps_lock===true)
									{
										$keyboard('.letter').toggleClass('uppercase');										
										caps_lock=false;
									}
								}
							}

					break;
					case 32:
						lowercase="&nbsp;";	
			  		break;					
					case 186:
						lowercase='<span class="off">;</span><span class="on">:</span>';	
			  		break;
					
					case 188:
						lowercase='<span class="off">,</span><span class="on">&lt;</span>';	
			  		break;
					case 190:
						lowercase='<span class="off">.</span><span class="on">&gt;</span>';	
			  		break;
					case 191:
						lowercase='<span class="off">/</span><span class="on">?</span>';	
			  		break;
					case 222:
						lowercase='<span class="off">'+"'"+'</span><span class="on">&quot;</span>';	
			  		break;				
					
					
				}


			  $keyboard('#keyboard li').each(function(){
				  /* Обработка события аналогична обработке события mousedown*/

				  if ((jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())|| jQuery.trim($keyboard(this).html())===lowercase)
				  {
					  $keyboard(this).css('position','relative');
					  $keyboard(this).css('top','2px');
					  $keyboard(this).css('left','2px');
					  $keyboard(this).css('border-color','#e5e5e5');	
				  }
		  

				  			
		  });
		  			 if (event.keyCode===13)
			 {
	  		 	 var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
			 /* Генерируем звуковой эффект создания новой строки */
				 	 aSoundObject1.play();		  		  
			 }
			 else{

				 var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
				 	aSoundObject.play();		  		  
			 /* Генерируем звуковой эффект нажатой клавиши */
		  
			 }


	  },
	  keyup: function(event){
		  /* При обработке данного события изображения клавиш возвращаются в исходные положения */
			  var lowercase=String.fromCharCode(event.keyCode);
			  switch(event.keyCode)
				{
					case 8:
						lowercase='delete';
					break;
					case 13:
						lowercase='return';
						break;
					case 16:
						lowercase='shift';
					break;						
					case 20:
					 	lowercase="caps lock";
					break;
					
					case 32:
						lowercase="&nbsp;";	
			  		break;
					case 186:
						lowercase='<span class="off">;</span><span class="on">:</span>';	
			  		break;
					
					case 188:
						lowercase='<span class="off">,</span><span class="on">&lt;</span>';	
			  		break;
					case 190:
						lowercase='<span class="off">.</span><span class="on">&gt;</span>';	
			  		break;
					case 191:
						lowercase='<span class="off">/</span><span class="on">?</span>';	
			  		break;
					case 222:
						lowercase='<span class="off">'+"'"+'</span><span class="on">&quot;</span>';	
			  		break;
					

				}

  	
			 /* Аналогично обработке события mouseup */
			  $keyboard('#keyboard li').each(function(){
  
				  if (jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())
				  {
					  $keyboard(this).css('position','static');
					  $keyboard(this).css('top','2px');
					  $keyboard(this).css('left','2px');
					  $keyboard(this).css('border-color','#000');	
				  }

				  
		  });



	  },
	  keypress: function(event){
		 /* Обработка события при вводе текста. Определяет регистр введенного текста. */

		 						if (isCapslock(event)===true)
							{
								if (caps_lock===false)
								{
								$keyboard('.letter').toggleClass('uppercase');	
								caps_lock=true;
								}
							}
							else
							{
								if (event.keyCode!=32)
								{
									if (caps_lock===true)
									{
										$keyboard('.letter').toggleClass('uppercase');										
										caps_lock=false;
									}
								}
							}


	
	  }
	  });
});

 

 

Шаг 5. Завершенный HTML код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Оригинальная форма для сообщения | Демонстрация для сайта RUSELLER.COM</title>
    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/stylesheet.css" type="text/css" charset="utf-8" />
	<link href="/css/style.css" rel="stylesheet" type="text/css"  />
    <link rel="stylesheet" type="text/css" href="/css/flashblock.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="/js/soundmanager2.js"></script>
	<script type="text/javascript">
		var winLoc = window.location.toString();
		// Подключаем звуковые эффекты
		if (winLoc.match(/flash9/i)) {
		  soundManager.flashVersion = 9;
		  if (winLoc.match(/highperformance/i)) {
			soundManager.useHighPerformance = true;
			soundManager.useFastPolling = true;
		  }
		} else if (winLoc.match(/flash8/i)) {
		  soundManager.flashVersion = 8;
			}

			soundManager.useFlashBlock = true;
			soundManager.url = 'swf/'; // Путь к файлам swf SoundManager2 (обратите внимание на обратный слеш)
			soundManager.debugMode = false;
			soundManager.consoleOnly = false;
			soundManager.onready(function(oStatus) {
 				 if (!oStatus.success) {
				    return false;	
				  }
			  // soundManager инициализован и готов к использованию. Создаем звуки для демонстрационной страницы.
				 soundManager.createSound({
				    id: 'mySound2',
				    url: 'sound/typewriter_key_4.mp3'
				});
				soundManager.createSound({
					id: 'mySound3',
				    url: 'sound/typewriter_line_break.mp3'
  				});
			    soundManager.createSound({
				    id: 'mySound5',
			    	url: 'sound/typewriter-paper-1.mp3'
				});

			});
</script>
    
 		<script type="text/javascript" src="/js/keyboard.js"></script> 


</head>
<body>
<div id="container">
	<div id="typewritter">
	</div>
    <!-- Область для ввода текста -->
	<textarea id="write"  wrap="virtual" autocomplete="off"  ></textarea>
    <!-- Виртуальная клавиатура -->
	<ul id="keyboard">
		<li class="letter">ё</li>
		<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
		<li class="symbol"><span class="off">2</span><span class="on">"</span></li>
		<li class="symbol"><span class="off">3</span><span class="on">№</span></li>
		<li class="symbol"><span class="off">4</span><span class="on">;</span></li>
		<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
		<li class="symbol"><span class="off">6</span><span class="on">:</span></li>
		<li class="symbol"><span class="off">7</span><span class="on">?</span></li>
		<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
		<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
		<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
		<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
		<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
		<li class="delete lastitem">Удалить</li>
		<li class="tab">Tab</li>
		<li class="letter">й</li>
		<li class="letter">ц</li>
		<li class="letter">у</li>
		<li class="letter">к</li>
		<li class="letter">е</li>
		<li class="letter">н</li>
		<li class="letter">г</li>
		<li class="letter">ш</li>
		<li class="letter">щ</li>
		<li class="letter">з</li>
		<li class="letter">х</li>
		<li class="letter">ъ</li>
		<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
		<li class="capslock">caps lock</li>
		<li class="letter">ф</li>
		<li class="letter">ы</li>
		<li class="letter">в</li>
		<li class="letter">а</li>
		<li class="letter">п</li>
		<li class="letter">р</li>
		<li class="letter">о</li>
		<li class="letter">л</li>
		<li class="letter">д</li>
		<li class="letter">ж</li>
		<li class="letter">э</li>
		<li class="return lastitem">return</li>
		<li class="left-shift">shift</li>
		<li class="letter">я</li>
		<li class="letter">ч</li>
		<li class="letter">с</li>
		<li class="letter">м</li>
		<li class="letter">и</li>
		<li class="letter">т</li>
		<li class="letter">ь</li>
		<li class="letter">б</li>
		<li class="letter">ю</li>
		<li class="symbol"><span class="off">.</span><span class="on">,</span></li>
		<li class="right-shift lastitem">shift</li>
		<li class="space lastitem">&nbsp;</li>
        <li id="send" class="send"><span>Отправить</span></li>
	</ul>
</div>
</body>
</html>

Теперь наша печатная машинка полностью готова. Можно потестировать ее в различных браузерах. В IE8 и IE9 прокрутка листа сообщения не работает.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/cchs0hnq2cQ/lessons.php

Форма для сообщения в виде пишущей машинки | | 2012-06-19 12:10:07 | | Статьи Web-мастеру | | В данном уроке мы разберёмся, как создать оригинальную форму для сообщений в виде пишущей машинки. Все основные функции данного агрегата, вышедшего из употребления, будут бережно восстановлены с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации


Услуги интернет компании Редлайн

Самый лучший человек тот, который живет преимущественно своими мыслями и чужими чувствами, самый худший сорт человека - который живет чужими мыслями и своими чувствами. Из различных сочетаний этих четырех основ, мотивов деятельности - все различие людей. Люди, живущие только своими чувствами, - это звери.

Толстой Лев Николаевич - (1828-1910) - великий русский писатель. Его творчество оказало огромное влияние на мировую литературу

Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.
Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.


Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Высококачественные сайты по доступным ценамМы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

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

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

Передав свой сайт для поддержки в руки наших специалистов, Вы избавитесь от проблем, связанных с обновлением информации и контролем за работой ресурса.

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

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

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

Адаптивный дизайн сайтов и веб-приложений

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

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

Быстрый заказ \ Консультация

Контекстная реклама в Яндекс и GoogleКонтекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×