В нашем примере выполним настройку цветового оформления таким образом, чтобы шрифт отображался красным цветом, а строка – желтым (см. рис. 5.22). Как обычно, на вкладке Просмотрвид фразы автоматически изменится в соответствии с установленными настройками.

На этом мы завершим работы по оформлению нашей фразы. После нажатия в данном окне кнопки ОКпрограммный код веб-страницы примет вид, как показано в листинге 4.6.

Листинг 4.6. Настройка параметров шрифта

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

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

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

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

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

Рис. 5.23. Нестандартное оформление части контента

Далее рассмотрим остальные инструменты, расположенные на вкладке Тексти предназначенные для работы с текстовым контентом.

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

Кнопка Степеньпредназначена для сдвига выделенного слова или текстового фрагмента вверх относительно расположенного рядом текста (иначе говоря, включается верхний индекс). Кнопка Индекспредназначена для сдвига выделенного слова или текстового фрагмента вниз относительно расположенного рядом текста (иначе говоря, включается нижний индекс). Чтобы было понятнее, продемонстрируем на конкретном примере порядок применения данных кнопок.

Во второй фразе нашего примера (см. рис. 5.17) к слову этогоприменим верхний индекс, а к слову использовать– нижний индекс. Выделим слово этогои нажмем кнопку Степень, после чего выделим слово использоватьи нажмем кнопку Индекс. В результате программный код нашей веб-страницы будет выглядеть так, как показано в листинге 4.7.

Листинг 4.7. Применение верхнего и нижнего индексов

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

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

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

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

Рис. 5.24. Применение верхнего и нижнего индексов

После кнопки Индексследуют четыре кнопки, которые предназначены для размещения текста на странице. Эти кнопки перечислены ниже.

• Выровнять по левому краю– при нажатии данной кнопки текст выравнивается по левому краю.

• Выровнять по центру– с помощью данной кнопки текст можно выровнять по центру.

• Выровнять по правому краю– при нажатии данной кнопки текст выравнивается по правому краю.

• Выровнять по ширине– в данном случае текст будет растянут по всей ширине веб-страницы.

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

В программе NeonHtml реализован очень удобный и простой механизм для создания разных списков (нумерованных, маркированных и выпадающих). С его помощью вы можете не просто добавить в программный код теги путем нажатия соответствующих кнопок, а в отдельном окне указать все параметры списка, нажать кнопку ОК– и программа автоматически сгенерирует код списка.

Чтобы перейти в режим автоматического формирования списков, нужно на вкладке Текстнажать кнопку Инструмент создания списков(название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши). В результате на экране отобразится окно, изображенное на рис. 5.25.

Рис. 5.25. Режим создания списков

Создание маркированных и нумерованных списков осуществляется на вкладке Маркированный/нумерованный. Выбор типа списка производится с помощью соответствующего переключателя. Если вы создаете маркированный список, то в поле Маркерыиз раскрывающегося списка нужно выбрать тип маркера – Кружок, Пустой кружокили Квадратик. Если ни один из предложенных вариантов вас не устраивает, то в качестве маркера вы можете использовать произвольное изображение. Путь к файлу этого изображения указывается в поле Маркер-картинка: для этого нужно нажать расположенную справа от данного поля кнопку, и в открывшемся окне по обычным правилам Windows указать путь к файлу изображения, которое будет использоваться в качестве маркера.

Если вы создаете нумерованный список, то в поле Тип номеровиз раскрывающегося списка нужно выбрать способ нумерации (цифрами, буквами, римскими цифрами), а также указать, с какого номера начинать нумерацию. По умолчанию предлагается использовать нумерацию арабскими цифрами, и начинать ее с первого номера.

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