Или Как просмотреть исходный код страницы 19 страница
</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 вы можете максимально упро- стить и автоматизировать данный процесс. Несложный механизм позволяет буквально несколькими щелчками мыши вставить в стра- ницу флеш-объект: пользователю нужно лишь указать соответству- ющие параметры, и программа автоматически сгенерирует код.
Вставка флеш-объектов в программе NeonHtml осуществляется на вкладке Мультимедиа с помощью кнопки Флеш-ролик, которая является крайней справа (см. рис. 5.41). При нажатии данной кнопки на экране открывается окно, изображенное на рис. 5.44.
 |
Рис. 5.44. Настройка вставки флеш-ролика
В данном окне осуществляется настройка параметров вставки флеш-объекта. В первую очередь в поле Путь к ролику нужно указать путь к файлу вставляемого флеш-объекта. Для этого нужно нажать расположенную справа от данного поля кнопку Выбрать ролик на диске, и в открывшемся окне по обычным правилам Windows указать требуемый путь. Отметим, что если формат выбранного файла не со- ответствует флеш-формату, то поле Путь к ролику останется неза- полненным.
В полях Ширина и Высота с клавиатуры либо с помощью кнопок счетчика можно указать соответствующие параметры флеш-объекта. По умолчанию значение каждого из этих полей — 100.
Если необходимо, чтобы данный флеш-ролик успешно взаимо- действовал с объектами JavaScript, установите флажок Совместим с JavaScript, расположенный внизу окна.
Завершается процесс вставки флеш-объекта нажатием в данном окне кнопки ОК. Сразу после этого в исходный код веб-страницы бу- дет добавлен соответствующий фрагмент, автоматически сгенериро- ванный программой.
Вставка в веб-документ видеоролика
На многих современных веб-ресурсах имеются видеоролики, что делает сайт более информативным, эргономичным и привлекатель- ным. В программе NeonHtml реализована возможность автоматиче- ской вставки видеороликов в документ, что избавляет пользователя самостоятельно писать соответствующий фрагмент исходного кода веб-страницы.
Для этого на вкладке Мультимедиа нужно нажать кнопку Видеоро- лик. При этом на экране отобразится окно, изображенное на рис. 5.45.
 |
Рис. 5.45. Настройка параметров вставки видеоролика
В поле Файл необходимо указать файл видеоролика, вставляемо- го в документ. Чтобы заполнить данное поле, нужно нажать распо- ложенную справа от него кнопку. В результате на экране откроется окно Выбор пути, в котором нужно указать путь к требуемому файлу, выделить этот файл щелчком мыши и нажать кнопку Открыть или клавишу Enter. Если файл вставляемого видеоролика находится в том же каталоге, что и файл текущей веб-страницы, то в поле Файл отоб- разится только его имя.
После этого можно указать размеры видеоролика по высоте и ширине. Для этого нужно установить соответствующие флажки, за- тем с клавиатуры либо с помощью кнопок счетчика ввести требуе- мый размер, а из расположенного рядом раскрывающегося списка выбрать единицу измерения размера (пиксель, миллиметр, санти- метр и др.). По умолчанию в качестве единицы измерения предлага- ется использовать пиксель.
В поле alt с клавиатуры можно ввести альтернативный текст, ко- торый будет отображаться на экране в том случае, если видеоролик по каким-то причинам не может быть воспроизведен (например, ко- гда Интернет-обозреватель не поддерживает работу с подобными объектами либо когда воспроизведение видеороликов в нем отклю- чено и т. п.). Например, здесь можно ввести следующее значение: Из- вините, видео временно отсутствует (см. рис. 5.45).
Возможности программы позволяют вставить видеоролик таким образом, что при подведении к нему указателя мыши будет отобра- жаться соответствующая всплывающая подсказка. Текст этой под- сказки вводится с клавиатуры в поле title.
Завершается процесс вставки видеоролика нажатием в данном окне кнопки ОК. В листинге 4.18 показан программный код веб-страницы, с которой мы работали ранее, после вставки в него видеоролика в соот- ветствии с настройками, представленными на рис. 5.45.
Листинг 4.18. Вставка видеоролика в веб-документ
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.<br>
<img dynsrc="vts_01_1.vob" style="width:300px;height:200px;" alt="Извините, видео временно отсутствует">
Полученные знания применим на практике.
</body>
</html>
После сохранения выполненных изменений и открытия веб- страницы в окне Интернет-обозревателя можно воспроизвести име- ющийся в ней видеоролик.
Быстрый поиск и замена данных в программе NeonHtml
В программе NeonHtml реализована возможность быстрого поис- ка данных. Это особенно актуально при работе с большими про- граммными кодами или с большими объемами данных, поскольку поиск требуемой информации вручную (например, путем просмотра программного кода) может занять слишком много времени, и к тому же не гарантирует положительного результата. К тому же один и тот же фрагмент иногда встречается в тексте или программном коде не- сколько раз, и при ручном поиске велика вероятность того, что где-то нужный элемент будет пропущен.
Чтобы приступить к поиску данных, нужно в главном меню про- граммы выполнить команду Выполнить > Окна, диалоги > Поиск, за- мена, которая вызывается также нажатием клавиши F3. Также можно воспользоваться кнопкой Поиск, замена, которая расположена в па- нели инструментов рабочей области (напомним, что названия кно- пок инструментальных панелей отображаются в виде всплывающей подсказки при подведении к ним указателя мыши). При выполнении любого из перечисленных действий на экране отображается окно настройки параметров поиска и замены, изображенное на рис. 5.46.
 |
Рис. 5.46. Настройка параметров поиска и замены
В данном окне в поле Что нужно ввести фрагмент текста или программного кода, который требуется найти. Например, на рис. 5.46 в данном поле введено значение green, следовательно — данное сло- во будет являться объектом поиска.
Под полем Что с помощью соответствующих параметров можно выполнить дополнительную настройку поиска. Если необходимо, чтобы в процессе поиска учитывался регистр символов (прописные или строчные), то установите флажок Учитывать регистр. В этом случае, если в поле Что введено слово green, то слово Green при поис- ке будет проигнорировано. Чтобы начать поиск с каретки, установи- те флажок Начать с каретки.
Возможности программы предусматривают не только автомати- ческий поиск, но и быструю замену данных. Это позволяет оператив- но внести требуемые корректировки в программный код. Например, вы хотите, чтобы все элементы, которые раньше на странице отоб- ражались зеленым цветом, стали красными. Для этого вам необяза- тельно просматривать весь программный код, вручную заменяя green на red, а просто задать соответствующий режим замены — и все будет сделано моментально.
Текстовый фрагмент, которым необходимо заменить найденный фрагмент, вводится в поле Чем.
Возможности программы предусматривают выполнение поиска и замены данных в текущем документе, в предварительно выделенном фрагменте или сразу в нескольких документах. Требуемый вариант указывается с помощью соответствующего переключателя. Если вы хотите выполнить поиск сразу в нескольких документах, то необхо- димо сформировать их список в нижней части окна. Чтобы добавить документ в этот список, нужно нажать кнопку Добавить документы, затем в открывшемся окне найти требуемый файл и выделить его щелчком мыши, после чего нажать кнопку Открыть. Если какой-то документ необходимо удалить из списка, выделите его щелчком мы- ши и нажмите кнопку Удалить. Чтобы быстро удалить из списка все документы, используйте кнопку Очистить. Помните, что при удале- нии документов из списка необходимо соблюдать осторожность, по- скольку программа не выдает дополнительный запрос на подтвер- ждение операции удаления.
Чтобы запустить поиск данных в соответствии с установленными параметрами, нажмите в данном окне кнопку Найти. Для выполне- ния поиска с одновременной заменой данных нажмите кнопку Заме- нить. Если установить флажок Не скрывать окно, то во время поиска и замены окно настройки параметров будет отображаться на экране. При снятом данном флажке окно будет скрыто сразу после нажатия кнопки Найти или Заменить.
Глава 6. ПРОГРАММА EXTRA HIDE STUDIO —
Дата добавления: 2021-01-21; просмотров: 86; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!