Программа Конюх будет вызываться со страниц учебника “Азы информатики” для работы в отдельном окне. Положим размеры этого окна 610x460 — это (с небольшим запасом) обеспечит показ программы без линеек прокруток на мониторах с разрешением 640x480.

Ниже представлен пример вызова Конюха при помощи стандартной кнопки <INPUT type=button>:

Используя CSS-позиционирование элементов, построим жесткий экранный каркас программы, который не будет форматироваться браузером. Все экранные элементы поместим внутрь “выпуклого” прямоугольника, который зададим следующим стилевым определением:

.program /* Стиль основной области */
{
  position:absolute;
  left:10px; top:10px;
  width:590px; height:440px;

  /* "Выпуклая" граница */
  border-style:        solid;
  border-width:        1px;
  border-left-color:   white;
  border-top-color:    white;
  border-right-color:  gray;
  border-bottom-color: gray;
}

Размеры прямоугольника 590x440, что вместе с отступами по краям в 10 пикселов как раз дает размер окна 610x460. В HTML-файле Конюха запишем такой код:

Теперь зададим стили для среды исполнителя и панели управления:

.sreda /* Стиль среды исполнителя */
{
  position:absolute;
  left: 10px; top:100px;
  width:280px; height:280px;
  padding: 0px;

  /* "Вдавленная" граница */
  background-color:    #D1B284;
  border-style:        solid;
  border-width:        1px;
  border-left-color:   gray;
  border-top-color:    gray;
  border-right-color:  white;
  border-bottom-color: white;
}

.control /* Стиль панели управления */
{
  position:absolute;
  left: 300px; top:100px;
  width:280px; height:280px;
  padding: 0px;

  /* "Вдавленная" граница */
  background-color:    #D1B284;
  border-style:        solid;
  border-width:        1px;
  border-left-color:   gray;
  border-top-color:    gray;
  border-right-color:  white;
  border-bottom-color: white;
}

Эти две области будут вложены в основную область program, поэтому отсчет координат в них выполняется от левого верхнего угла program:

Зададим стили для поля программы (протокола) и поля ввода команд:

.list /* Стиль протокола */
{
  position:absolute;
  left: 10px; top:10px;
  width:258px; height:220px;
  font-size:12pt;
}

.com /* Стиль поля ввода */
{
  position:absolute;
  left: 10px; top:238px;
  width:90px; height:30px;
  font-size:14pt;
  font-family:"Arial Cyr",Geneva,Helvetica,sans-serif;
}

Поле протокола и поле ввода будут размещаться в области control, поэтому координаты полей будут отсчитываться от левого верхнего угла области control:

Введем область programUp — верхнюю часть экранного образа программы. В нее вложим картинку с изображением исполнителя и область programKey с кнопками 1-4. Новые стилевые определения выглядят так:

/* Стиль верхней части программной области */
.programUp
{
  position:absolute;
  left: 10px; top:10px;
}

/* Стиль блока с кнопками в верхней части */
.programKey
{
  position:absolute;
  left: 449px;
}

“Чувствительность” экранных кнопок будем имитировать подменой изображения при перемещении курсора на кнопку и уходе с нее (события mouseover и mouseout):

В среде исполнителя разместим фигурки коней. Было бы логично поместить соответствующие HTML-коды внутрь блока sreda, но приходится располагать их “снаружи”. Дело в том, что браузер IE-5 интерпретирует координаты элемента при его перетаскивании по экрану (а коней хочется перемещать мышкой!) совсем не так, как браузер IE-4, когда элемент позиционируется не относительно блока BODY. Координаты коней отсчитываются от левого верхнего угла рабочего поля окна (элемента BODY).

Теперь осталось совсем немного. Определим стиль блока с кнопками на панели управления:

/* Стиль кнопок на панели управления */
.controlKey
{
  position:absolute;
  left:150px; top:238px;
  width:160px;
}

И разместим в этом блоке сами кнопки:

Последний штрих: добавим картинку-строку с авторской подписью. Стиль новой области определим так:

/* Стиль нижней части программной области */
.programDown
{
  position:absolute;
  left: 10px; top:400px;
}

Картинку расположим внутри этой области:

Экранный образ программы практически построен, но это просто изображение, которое никак не реагирует ни на мышиные, ни на клавиатурные воздействия. Изображение превратится в настоящую программу тогда, когда будут написаны коды скриптов, обрабатывающие мышиные и клавиатурные события. Некоторые поучительные фрагменты этих кодов будут рассмотрены в следующем уроке, а сейчас в каталоге horse можно посмотреть два файла: horse.htm — HTML-коды Конюха и файл horse.css — в нем собраны стилевые определения.