Рис. 5.14. Навигация по документу

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

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

Рис. 5.15. Инструменты для работы с текстовым контентом

Крайняя слева кнопка на данной вкладке предназначена для формирования параграфов. При нажатии данной кнопки в программный код документа вставляется тег

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

При нажатии на кнопку Прочееоткрывается меню, команды которого также предназначены для вставки в документ разных тегов. Содержимое данного меню представлено на рис. 5.16.

Рис. 5.16. Меню, открываемое нажатием кнопки Прочее

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

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

Предположим, что у нас есть следующий программный код (рис. 5.17).

Рис. 5.17. Пример программного кола веб-страницы

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

Листинг 4.5. Применение тегов из меню Прочее

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

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

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

В результате первая и последняя фразы текстовой части контента заключены в соответствующие теги. Теперь можно просмотреть результат в окне Интернет-обозревателя, используемого в данном компьютере по умолчанию. Для этого нажмем клавишу F10, предварительно сохранив выполненные изменения с помощью команды главного меню Файл ► Сохранитьили нажатием комбинации клавиш Ctrl+S. Результат показан на рис. 5.18.

Рис. 5.18. Оформление заголовка и фразы цитирования

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