Шрифт:
Как видно на рисунке, предварительно выделенный в программном коде текст помещен в таблицу, состоящую из одной ячейки.
Добавление форм ввода данных
На многих веб-страницах используются разнообразные формы ввода данных. С их помощью, в частности, происходит авторизация посетителей веб-ресурса, выбор товаров в Интернет-магазине, отбор какой-то информации в соответствии с заданными условиями, и т. д. Возможности программы CatsHtml предусматривают создание форм ввода данных с использованием разных элементов (поля текстового ввода, переключатели, кнопка отправки и очистки всех параметров формы, т др.).
Для работы с формами в программе предусмотрены инструменты, расположенные на вкладке Формы. Содержимое данной вкладки представлено на рис. 3.9.
Рис. 3.9. Вкладка Формы
На данной вкладке первой слева кнопкой является кнопка Формы. Если намереваетесь использовать форму, то использование этой кнопки обязательно: при ее нажатии в программный код веб-страницы будет вставлен код, включающий в себя начальный и конечный теги формы.
Учтите, что все элементы формы должны находиться внутри элемента FORM, вставляемого с помощью кнопки Формы. Иначе говоря, если вы без предварительной вставки элемента FORM нажмете кнопку Поле ввода, Стереть, Отправить или какую-то другую кнопку, предназначенную для вставки элемента формы – это не будет иметь никакого смысла: элемент не отобразится на странице и, соответственно, работать не будет.
В листинге 2.8 показан фрагмент программного кода, при котором на странице создана форма, содержащая поле текстового ввода данных и переключатель (эта форма расположена после текстовой части контента).
Листинг 2.8. Добавление формы и ее элементов
<body>
Этот файл создан для примера. Если нужно, будет сформирован еще один такой файл.
<FORM ACTION="mailto:anonim@rambler.ru?subject=привет" Name="" enctype="text/plain" method="post">
<INPUT TYPE="" SIZE="" NAME="" VALUE="">
<input type="radio" name="" value="" checked>
</FORM>
</body>
Возможности программы предусматривают вставку с помощью соответствующих кнопок следующих элементов формы:
• поле ввода данных;
• поле ввода нескольких строк;
• переключатель;
• поле ввода пароля;
• кнопка для очистки всех параметров формы от присвоенных им значений;
• кнопка для отправки введенных в параметры формы данных;
• поле для выбора значения из раскрывающегося списка.
Отметим, что фрагменты кода, добавляемые при нажатии соответствующих кнопок, вы можете редактировать вручную по своему усмотрению (более того – это почти всегда необходимо, чтобы, например, ввести доступные для выбора варианты возможных значений, и др.).
Цветовое оформление веб-страницы
Цветовое оформление играет одну из ключевых ролей в эргономике страницы. В программе CatsHtml реализована возможность тонкой настройки цвета шрифта и фонового оформления веб-документа. Необходимые действия выполняются на вкладке Цвета, которая содержит две кнопки: Цвет шрифта и Фоновый цвет.
Как нетрудно догадаться, первая из этих кнопок предназначена для выбора цвета шрифта, а вторая – для выбора цвета фона. В любом случае после выполнения настроек в программный код веб-страницы автоматически добавляются соответствующие элементы.
Настройка цветового оформления и для шрифта, и для фона осуществляется одинаково. При нажатии любой из кнопок на экране отображается окно, изображенное на рис. 3.10.
Рис. 3.10. Настройка цветового оформления
Данное окно состоит из двух частей: вверху осуществляется выбор цвета из предложенного стандартного набора, а внизу можно выбрать тему оформления.
ПРИМЕЧАНИЕ
Управление отображением нижней части окна осуществляется с помощью кнопки Темы. Отметим, что по умолчанию нижняя часть окна не отображается.
Чтобы выбрать цвет, достаточно в верхней части окна щелкнуть мышью на соответствующем значке. Если в предложенном стандартном наборе вам не удалось найти подходящий цвет – нажмите кнопку Выбрать, и в открывшейся палитре цветов самостоятельно выполните настройку цвета.
Что касается выбора темы оформления, то вначале нужно в левой части окна щелчком мыши выбрать название темы, а после этого в правой части указать стиль цветового оформления.
Работа с буфером обмена