Тонкости и хитрости создания сайтов

Веб дизайн. Маленькие тонкости и хитрости создания красивых сайтов.

       Для привлечения внимания пользователя к определённым элементам сайта веб дизайнерам не редко приходиться использовать маленькие хитрости и тонкости веб дизайна. При этом дизайн сайта в целом остаётся не тронутым.
       Эти тонкости и хитрости веб дизайна, как правило, украшают веб страницы и придают сайту оживлённость.
    Не обычный  дизайн привлекает внимание пользователя, тем самым увеличивает время пребывания на сайте.
      В итоге Вы получаете клик по нужной ссылке.

      

Мигающий текст


      
      Для привлечения внимания к какому-то параграфу или тексту на веб-странице можно разместить мигающий текст. Для этого можно использовать Java скрипт:
      
      <body bgcolor=white text=black leftMargin=0 topMargin=0 marginwidth=0 marginheight=0 onLoad="show5();">
      
      <font>
      <span id="liveclock"></span>
      <script language="JavaScript">
      <!--
      var trigg="0"
      function show5(){
      if (!document.layers&&!document.all)
      return
      var Digital=new Date()
      var seconds=Digital.getSeconds()
      if (trigg=="0"){
      trigg="1"
      myclock="Текст мигает"
      }
      else { if (trigg=="1"){
      trigg="0"
      myclock="    "
      }
      }
      if (document.layers){
      document.layers.liveclock.document.write(myclock)
      document.layers.liveclock.document.close()
      }
      else if (document.all)
      liveclock.innerHTML=myclock
      setTimeout("show5()",1000)
      }
      
      //-->
      </script>
      
      </font>
      
      
      Полный текст - в файле blink.htm.    Посмотреть, как это работает
.
      Если вы смотрите на своем компьютере, не забудьте разрешить выполнение Java скриптов.


      

"Объемный" заголовок без графики


      
      Посмотрите на разные варианты одного и того же заголовка:
      
      Английский язык
      
      Английский язык
      
      Верхний, псевдообъемный, заголовок выглядит предпочтительнее. При этом он выполнен наложением трех одинаковых текстов разного цвета со сдвигом в 1 pixel.
      Для этого используем слои:
      
      <DIV id="waterMark" style="position:absolute;top:6;left:6">
      <p align=center><table bgcolor=red border=0 cellpadding=0 cellspacing=0 width=750>
          <tr>
            <td><font size=7 color=black face="Arial,Tahoma,Helvetica"><b>Английский язык</b></font></a></td>
          </tr>
      </table>
      </DIV>
      
      Здесь показан HTML код только для самого нижнего (первого) слоя (color=black ),
      а position:absolute;top:6;left:6 задают его абсолютные координаты на экране (координаты простой таблицы из одной строки). В данном примере - отступ 6 pix по вертикали и горизонтали.
      
      Полный текст HTML кода для псевдообъемного заголовка - смотрите в файле title.txt

      
      Каждый их этих текстов можно оформить как ссылку - все они проиндексируются.

      
      
      Тэг <DIV> позволяет выделить разделы в документе. <DIV> - блочный тэг, функционирующий подобно тэгу <P>. <DIV> может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.
      Синтаксис: <DIV align=отступ> Текст раздела </DIV>

      
  

      Подсвечиваем фон текста

      
      Если вы хотите привлечь внимание к какому-то фрагменту текста, когда его просматривает посетитель, используйте следующий скрипт
      
      <script language="JavaScript">
      <!--
      function mOvr(src,clrOver){if (!src.contains(event.fromElement)){src.bgColor = clrOver;}} function mOut(src,clrIn){if (!src.contains(event.toElement)){src.style.cursor = "default";src.bgColor = clrIn;}}
      //-->
      </script>
      
      Применение в строке таблицы:
      
      <td onmouseover="mOvr(this,'a58439');" onmouseout="mOut(this,'');">
      
      Когда вы таким образом доработаете строку таблицы, ее фон будет меняться, когда указатель мыши будет будет по ней перемещаться:
      

      Цвет фона
      
      Цвет фона
      


      Демонстрационный HTML код - в файле bgcolor.htm
      


      Подсвечиваем текст


      
      Если совсем не много модернизировать код скрипта, то можно подсвечивать не фон текста, а менять цвет самого текста. Цвет текста меняется, когда пользователь проводит по тексту мышкой.
      Для функции mOv нужно заменить src.bgColor на src.style.color, а вызов функции с параметрами выполнять в тэге <font>:

      
      <font size=2 color=#e4db90 face="Arial,Tahoma,Helvetica" onmouseover="mOvr(this,'29D517');" onmouseout="mOut(this,'');">
      
      Цвет текста
      
      Демонстрационный HTML код - в файле forecolor.htm

      

<<Веб дизайн. Тонкости и хитрости >>