Шрифт:
Рис. 5.20. Настройка размеров шрифта
Обратите внимание – вид нашей фразы, который представлен в правой части окна, заметно изменился в соответствии с установленными параметрами. Отметим, что значение каждого параметра можно указывать в разных единицах измерения. Выбор единицы измерения для каждого параметра осуществляется в соответствующем раскрывающемся списке. В нашем примере мы используем пиксель – эту единицу измерения предлагается использовать в программе по умолчанию.
После этого переходим на вкладку Стиль. Здесь можно выбрать способ начертания шрифта (жирный, подчеркнутый, и т.д.), включить режим написания каждого слова с прописной буквы, и т. д. Как обычно, в правой части окна будет демонстрироваться образец того, как будет выглядеть фраза на веб-странице при установленных в данный момент настройках.
В нашем примере мы настроим стиль отображения шрифта так, как показано на рис. 5.21.
Рис. 5.21. Настройка стиля шрифта
На данной вкладке все параметры настраиваются путем установки соответствующих флажков. Мы установили флажки Жирный и Подчеркнутый, в результате чего наша фраза стала выглядеть так, как показано в правой части окна на вкладке Просмотр.
Следующий этап – это настройка цветового оформления, которая осуществляется на вкладке Цвет. Возможности программы предусматривают настройку цветового оформления отдельно для букв, строк и фона просмотра. Настройка цвета букв и цвета строк выполняется одинаково: для этого нужно установить соответствующий флажок, щелкнуть мышью на расположенном справа прямоугольнике и в открывшемся окне цветовой палитры установить требуемый цвет. Настройка фона просмотра осуществляется аналогичным образом с той разницей, что отдельный флажок для данного параметра не предусмотрен (рис. 5.22).
Рис. 5.22. Настройка цветового оформления
Отметим, что действие параметра Фон просмотра распространяется только на вкладку Просмотр в правой части данного окна. На оформление веб-страницы данный параметр никак не влияет.
В нашем примере выполним настройку цветового оформления таким образом, чтобы шрифт отображался красным цветом, а строка – желтым (см. рис. 5.22). Как обычно, на вкладке Просмотр вид фразы автоматически изменится в соответствии с установленными настройками.
На этом мы завершим работы по оформлению нашей фразы. После нажатия в данном окне кнопки ОК программный код веб-страницы примет вид, как показано в листинге 4.6.
Листинг 4.6. Настройка параметров шрифта
<html>
<head>
<title>Работа в программе NeonHtml</title>
</head>
<body>
<h1>Здесь мы научимся создавать сайты.</h1>
Для этого будем использовать программу NeonHtml.
<font style="font:bold 14px/30px Arial Cyr;text-decoration:underline;letter-spacing:3px;word-spacing:10px;color:#F00;background:#FF0;">Полученные знания применим на практике.</font><font style="font:bold 14px/30px Arial Cyr;text-decoration:underline;letter-spacing:3px;word-spacing:10px;color:#F00;background:#FF0;"></font>
</body>
</html>
Мы видим, что в результате выполненных действий код веб-страницы дополнен довольно большим фрагментом. Этот фрагмент сгенерирован программой автоматически на основании действий, выполненных нами на вкладках окна настройки параметров шрифта. Если проанализировать добавленный фрагмент, то можно найти в нем немало уже знакомых нам тегов, атрибутов и прочих элементов, с помощью которых задается размер шрифта, его начертание, размер, цветовое оформление фразы, и т. д.
Теперь сохраним выполненные изменения с помощью команды главного меню Файл Сохранить или нажатием комбинации клавиш Ctrl+S, и просмотрим результат выполненных действий в окне Интернет-обозревателя, нажав для этого клавишу F10. Если все сделано правильно, то наша страница будет выглядеть так, как показано на рис. 5.23.
Рис. 5.23. Нестандартное оформление части контента
Далее рассмотрим остальные инструменты, расположенные на вкладке Текст и предназначенные для работы с текстовым контентом.
Справа от кнопки Шрифт находятся кнопки Жирный, Курсив, Зачеркнутый и Подчеркнутый. С помощью этих кнопок в программный код документа вставляются теги, предназначенные для применения соответствующего начертания шрифта. Еще правее находится кнопка Взять в кавычки, с помощью которой осуществляется заключение текста в кавычки. Действие этих кнопок может распространяться на предварительно выделенный текстовый фрагмент (в этом случае он будет заключен в соответствующие теги).
Кнопка Степень предназначена для сдвига выделенного слова или текстового фрагмента вверх относительно расположенного рядом текста (иначе говоря, включается верхний индекс). Кнопка Индекс предназначена для сдвига выделенного слова или текстового фрагмента вниз относительно расположенного рядом текста (иначе говоря, включается нижний индекс). Чтобы было понятнее, продемонстрируем на конкретном примере порядок применения данных кнопок.