Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
Для этого будем использовать программу NeonHtml.<br>
<form action="пример1.html" method="post" enctype="multipart/form-data" name="Obrazec">
</form>
Полученные знания применим на практике.
</body>
</html>
Напомним, что после вставки пустой формы, не содержащей каких-либо инструментов (полей, флажков, переключателей и др.), веб-страница при открытии в окне Интернет-обозревателя визуально никак не изменится.
Теперь добавим в нашу форму поле, предназначенное для ввода текстовых данных. Для этого установим курсор
Теперь добавим на страницу поле выбора файла. Для этого перейдем в исходном коде на следующую строку и нажмем кнопку Поле выбора файлов, которая находится справа от кнопки Поле ввода строки. В результате исходный код веб-страницы будет дополнен следующим фрагментом: <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. Если файл вставляемого графического объекта находится в том же каталоге, что и файл текущей веб-страницы, то в поле Файл отобразится только его имя.
Сразу после заполнения поля Файл в нижней части окна отобразится соответствующее изображение. После этого можно указать размеры этого изображения по высоте и ширине. Для этого нужно установить соответствующие флажки, затем с клавиатуры либо с помощью кнопок счетчика ввести требуемый размер, а из расположенного рядом раскрывающегося списка выбрать единицу измерения размера. (пиксель, миллиметр, сантиметр и др.). По умолчанию в качестве единицы измерения предлагается использовать пиксель.
ПРИМЕЧАНИЕ
В нижней части окна демонстрируется образец того, как будет выглядеть изображение при текущих настройках. Это позволяет сразу определить оптимальные его размеры, чтобы не возвращаться к этому вопросу впоследствии.
В поле alt с клавиатуры можно ввести альтернативный текст, который будет отображаться на экране в том случае, если графический объект по каким-то причинам не может быть показан (например, когда Интернет-обозреватель не поддерживает работу с подобными объектами либо когда отображение графических объектов в нем отключено, и т.п.). Например, здесь можно ввести следующее значение: Извините, рисунок временно отсутствует (см. рис. 5.42).
Возможности программы позволяют вставить графический объект таким образом, что при подведении к нему указателя мыши будет отображаться соответствующая всплывающая подсказка. Текст этой подсказки вводится с клавиатуры в поле title (см. рис. 5.42).
Завершается процесс вставки графического объекта нажатием в данном окне кнопки ОК. В листинге 4.17 показан программный код веб-страницы, с которой мы работали ранее, после вставки в него изображения в соответствии с настройками, представленными на рис. 5.42.
Листинг 4.17. Вставка графического объекта в веб-документ
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>