Листинг 4.12. Предварительная настройка таблицы

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

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

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

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

Как мы уже знаем, рамки таблицы задаются с помощью тега border. Следовательно, доработаем код нашей таблицы так, как показано в листинге 4.13.

Листинг 4.13. Начальный фрагмент табличного кода с добавленным тегом border

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

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

Листинг 4.14. Вставка таблицы на страницу

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

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

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

Теперь сохраним выполненные изменения и посмотрим, как выглядит страница в окне Интернет-обозревателя (рис. 5.37).

Рис. 5.37. Веб-страница с таблицей

Как видно на рисунке, мы получили таблицу из трех строк и четырех столбцов, обрамленную рамкой.

С помощью программы NeonHtml вы можете создавать формы для отправки данных, и включать в них переключатели, флажки, кнопки и иные инструменты. Необходимые для этого действия выполняются на вкладке Форма, содержимое которой представлено на рис. 5.38.

Рис. 5.38. Вкладка Форма

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

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

Рис. 5.39. Создание формы

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

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

Завершается процесс создания формы нажатием в данном окне кнопки ОК. В листинге 4.15 показан программный код веб-страницы после вставки в него формы в соответствии с настройками, представленными на рис. 5.39.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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