Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
Шрифт:
Интервал:
Закладка:
В поле Имя формы можно с клавиатуры ввести произвольное имя формы. Если внизу окна установить флажок Поддерживать отправление файлов, то в форме будет реализован механизм, позволяющий отправлять файлы.
Завершается процесс создания формы нажатием в данном окне кнопки ОК. В листинге 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="">.
Теперь переходим на следующую строку и нажимаем кнопку Галочка, чтобы добавить в форму флажок (на этой кнопке изображен характерный символ). После этого аналогичным образом с помощью кнопок Отправить (подтвердить) и Очистить поля формы (сброс) добавляем в форму кнопки соответственно отправки данных т очистки параметров формы. Затем разделим все добавленные параметры формы с помощью тега <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>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<img src="образец.jpg" style="width:300px;height:200px;" alt="Извините, рисунок временно отсутствует">
Полученные знания применим на практике.
</body>
</html>
После сохранения выполненных изменений и открытия веб-страницы в окне Интернет-обозревателя она должна выглядеть так, как показано на рис. 5.43.
Рис. 5.43. Вставка графического объекта
Как видно на рисунке, изображение помещено между фразами – именно там, где в исходном коде веб-страницы находится соответствующий фрагмент кода.
Вставка в веб-документ флеш-ролика
Многие современные Интернет-ресурсы используют на своих страницах флеш-объекты. Одни пользуются флеш-объектами в рекламных целях, другие – для привлечения посетителей, и т. д. В любом случае, если вы занимаетесь разработкой – очень желательно уметь вставлять на веб-страницу флеш-объекты.
С помощью программы NeonHtml вы можете максимально упростить и автоматизировать данный процесс. Несложный механизм позволяет буквально несколькими щелчками мыши вставить в страницу флеш-объект: пользователю нужно лишь указать соответствующие параметры, и программа автоматически сгенерирует код.
