Листинг 4.15.
Вставка формы в веб- документ

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<form action='пример1.html' method='post' enctype='multipart/form-data' name='Obrazec'>

</form>

Полученные знания применим на практике.

</body>

</html>

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

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

</form>
), и нажмем на вкладке
Форма
кнопку
Поле ввода строки
(она является третьей слева). В результате исходный код веб-страницы будет дополнен следующим фрагментом:
<input type='text' name='« value=»'>
. Если присвоить какое-то значение атрибуту
value
, то оно будет являться значением данного поля по умолчанию при открытии веб-страницы в окне Интернет-обозревателя.

Теперь добавим на страницу поле выбора файла. Для этого перейдем в исходном коде на следующую строку и нажмем кнопку

Поле выбора файлов
, которая находится справа от кнопки
Поле ввода строки
. В результате исходный код веб-страницы будет дополнен следующим фрагментом:
<input type='file' name=''>
.

Теперь переходим на следующую строку и нажимаем кнопку

Галочка
, чтобы добавить в форму флажок (на этой кнопке изображен характерный символ). После этого аналогичным образом с помощью кнопок
Отправить (подтвердить)
и
Очистить поля формы (сброс)
добавляем в форму кнопки соответственно отправки данных т очистки параметров формы. Затем разделим все добавленные параметры формы с помощью тега
<br>
– в результате каждый элемент формы будет располагаться на новой строке.

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

Листинг 4.16.
Добавление элементов в форму

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.<br>

<form action='пример1.html' method='post' enctype='multipart/form-data' name='Obrazec'>

<input type='text' name='' value=''> <br>

<input type='file' name=''> <br>

<input type='checkbox' name=''> <br>

<input type='submit' name='' value='Отправить'> <br>

<input type='reset' name='' value='Очистить'> <br>

</form>

Полученные знания применим на практике.

</body>

</html>

Если все сделано правильно, то после сохранения данных и открытия страницы в окне Интернет-обозревателя она будет выглядеть так, как показано на рис. 5.40.

Рис. 5.40.
Параметры отправки данных

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

Вставка в веб-документ графических объектов

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

Мультимедиа
, содержимое которой представлено на рис. 5.41.

Рис. 5.41.
Вкладка Мультимедиа

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

Картинка
. При ее нажатии на экране отображается окно, которое показано на рис. 5.42.

Рис. 5.42.
Вставка графических объектов

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

В поле

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

Сразу после заполнения поля

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

ПРИМЕЧАНИЕ

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

Добавить отзыв
ВСЕ ОТЗЫВЫ О КНИГЕ В ИЗБРАННОЕ

0

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

Отметить Добавить цитату