Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
Для примера создадим небольшую форму, которая будет включать в себя текстовое поле, поле выбора файла, флажок, а также кнопки отправки данных и очистки формы.
Напомним, что в первую очередь необходимо создать саму форму – в противном случае добавление флажков, кнопок и иных инструментов не будет иметь никакого смысла. Вставлять форму мы будем между двумя последними фразами веб-страницы, с которой работали и в предыдущих разделах. Чтобы добавить форму, нажмем на вкладке Форма кнопку с таким же названием (она является первой слева) – в результате на экране отобразится окно создания формы, изображенное
Рис. 5.39. Создание формы
В данном окне в поле Адрес отправления данных необходимо указать, по какому адресу будут отправляться данные после заполнения всех параметров формы и нажатия в ней кнопки Отправить (или другой кнопки, предназначенной для отправки данных). Чтобы заполнить данное поле, нужно нажать расположенную справа от него кнопку и в открывшемся окне указать требуемый путь.
В поле Имя формы можно с клавиатуры ввести произвольное имя формы. Если внизу окна установить флажок Поддерживать отправление файлов, то в форме будет реализован механизм, позволяющий отправлять файлы.
Завершается процесс создания формы нажатием в данном окне кнопки ОК. В листинге 4.15 показан программный код веб-страницы после вставки в него формы в соответствии с настройками, представленными на рис. 5.39.
Листинг 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="">.
Теперь переходим на следующую строку и нажимаем кнопку Галочка, чтобы добавить в форму флажок (на этой кнопке изображен характерный символ). После этого аналогичным образом с помощью кнопок Отправить (подтвердить) и Очистить поля формы (сброс) добавляем в форму кнопки соответственно
В конечном итоге исходный код нашей веб-страницы должен выглядеть так, как показано в листинге 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. Вставка графических объектов
В данном окне задаются все параметры, необходимые для вставки графического объекта на веб-страницу. Это избавляет пользователя от необходимости писать программный код: соответствующий фрагмент будет сгенерирован программой автоматически на основании заданных параметров, и вставлен в то место исходного кода веб-страницы, в котором находится курсор.